vscode写代码操作步骤，前端开发中VSCode如何配置ESLint
vscode写代码操作步骤，前端开发中VSCode如何配置ESLint创建好文件后，添加下述配置：我这里选择在项目的根目录创建.vscode文件夹， 然后再在其下面创建setting.json文件，将这个文件夹同步到git，这样做vscode就会优先读取项目根目录下的配置文件了，完美的解决了刚才那个痛点。本文中使用的项目地址：chat-system我们先需要为vscode安装相关插件。这里你可以选择直接修改vscode的setting.json文件，这样的修改是本地的，无法做到同步，如果有其他人也是用的vscode，那么你要告诉他改什么改什么，他在去改，甚是麻烦。
前言昨天，我的开源项目成员给我提交了代码，我在用webstorm看他的代码时发现了一堆跟代码格式相关的黄色报错，我就问他这一堆黄色报错你的编辑器就没给你提示吗？他说他用的vscode没有提示这些报错。
于是，我就亲自下载了vscode搞了下发现真没提示，在百度和掘金搜了下vscode配置eslint prettier的文章没有一个好使的，终于在踩了很多坑后，配置成功了。
本文就跟大家分享下如何在vscode上配置Eslint Prettier，欢迎各位感兴趣的开发者阅读本文。
写在前面本文中所使用的项目在package.json中已经装了相关依赖包，在项目根目录也有其对应的配置文件。webstorm是可以正确识别我的配置文件在保存时进行格式化的，vscode就不行了，本文的目的就是解决这个问题。
本文中使用的项目地址：chat-system
插件安装我们先需要为vscode安装相关插件。
- 安装eslint、prettier插件
这里你可以选择直接修改vscode的setting.json文件，这样的修改是本地的，无法做到同步，如果有其他人也是用的vscode，那么你要告诉他改什么改什么，他在去改，甚是麻烦。
我这里选择在项目的根目录创建.vscode文件夹， 然后再在其下面创建setting.json文件，将这个文件夹同步到git，这样做vscode就会优先读取项目根目录下的配置文件了，完美的解决了刚才那个痛点。
创建好文件后，添加下述配置：
{
"[vue]":{
"editor.defaultFormatter":"esbenp.prettier-vscode"
}
"eslint.alwaysShowStatus":true
"eslint.format.enable":true
"eslint.packageManager":"yarn"
"eslint.run":"onSave"
"prettier.packageManager":"yarn"
"eslint.validate":[
"vue"
"javascript"
"javascriptreact"
]
"editor.codeActionsOnSave":{
"source.fixAll.eslint":true
}
"vetur.validation.template":false
"editor.formatOnPaste":true
"editor.formatOnType":true
"editor.formatOnSave":true
"files.eol":"\n"
}
注意：如果你启用了prettier，但是没有相关配置文件，editor.formatOnSave选项就要设置为false。不然会与vscode自身的保存起冲突
接下来，我们来配置prettier，同样的在项目根目录创建.prettierrc.json文件，添加下述配置：
{
"tabWidth":2
"useTabs":false
"endOfLine":"auto"
"singleQuote":false
"semi":true
"trailingComma":"none"
"bracketSpacing":true
}
上述配置是我项目的相关规范，你可以按照你的实际需求去弄，对此不了解的可以去查阅官方文档。
做完上述配置后，vscode就已经可以按照我们的规范来进行相应的提示了，按ctrl s保存代码时其也会按照我们自定义的的规范进行格式化。
