前言：
同一个项目，保持代码风格的一致，是很是重要的一个规范。但事实上项目小组成员的代码校验规则、格式化工具一般都不一致，为了不项目到后期出现没法维护的问题，项目成员使用同一套校验规则，同一个格式化方式是至关好的步骤之一。javascript
我的博客了解一下：obkoro1.comhtml
保存时自动统一代码风格：
先经过一些简单的配置，而后：前端
Ctrl+s/command+s时自动修复代码的格式错误vue自动修复的规则是读取项目根目录的Eslint规则java
这样就能保证项目成员都是一套验证规则的代码风格面试
配置：
1.安装VsCode的`EsLint`和`vetur`插件
如图安装EsLint插件：npm
2.为项目安装`EsLint`包：
注意要安装在开发环境上，还有就是若是你使用的是脚手架的话，选了Eslint选项，会自带这些包。json
3.在项目的根目录下添加`.eslintrc.js`
用于校验代码格式，根据项目状况，可自行编写校验规则：bash
module.exports = {
// Eslint规则
}
4.首选项设置：
将下面这部分放入首选项设置中：微信
"eslint.autoFixOnSave": true, // 启用保存时自动修复,默认只支持.js文件
"eslint.validate": [
"javascript", // 用eslint的规则检测js文件
{
"language": "vue", // 检测vue文件
"autoFix": true // 为vue文件开启保存自动修复的功能
},
{
"language": "html",
"autoFix": true
},
],
想了解更多的话，推荐看一下VsCode的EsLint插件
大功告成：
点开文件，你可能会看到以下报错，无需一个一个去改，只要保存一下文件，就能够自动修复这些代码格式上的问题了。
注意：
若是整个文件都飘红的话，不会一次性修改若是的格式问题，会一下改一部分，你可能须要多按几回保存。
一键修复项目格式问题：
遇到下面这两种状况：
你刚刚引入这个自动修复，但你项目的文件比较多，且你又比较懒。
隔一段时间，修复一下代码格式上的问题
你能够像下面这样，在package.json里面的scripts里面新增一条以下命令：
"lint": "eslint --ext .js,.vue src --fix"
--ext后面跟上的.js、.vue是你要检测文件的后缀，.vue后面的src是要检测的哪一个目录下面的文件。
--fix的做用是自动修复根据你配置的规则检测出来的格式问题
一键修复:
输入以下命令行，就能够自动修复你src文件夹下面的全部根据你配置的规则检测出来的格式问题。
npm run lint
.eslintignore 不检测一些文件：
在项目的根目录建立一个.eslintignore文件，用于让EsLint不检测一些文件。
好比引的一些别人的文件，插件等,好比文件中：
src/test/*
src/test2/*
文件中的内容像上面这样写，这里第一行是不检测src目录下的test文件夹下面的全部文件。
自定义规则：
// .eslintrc.js文件
module.exports = {
"rules": { // 自定义规则
"no-console": 0,
"no-const-assign": 1,
"no-extra-bind": 2,
}
}
0、一、2的意思：
"off"或 0 - 关闭这项规则"warn"或 1 - 将规则视为一个警告"error"或 2 - 将规则视为一个错误
结语
使用自动VsCode+EsLint格式化代码，在团队内部相互去看别人的代码的时候，就能够更容易的看的懂，可以极大的下降团队的沟通成本和提升心情,设置这么方便，赶忙在团队中用起来吧！
但愿看完的朋友能够点个喜欢/关注，您的支持是对我最大的鼓励。
我的blog and 前端积累文档，如需转载，请放上原文连接并署名。码字不易，感谢支持！
若是喜欢本文的话，欢迎扫描关注个人订阅号，最新文章，面试题等都将第一时间发布在订阅号上。
以上2018.9.16
本文分享自微信公众号 - OBKoro1前端进阶积累（gh_8af2fb8e54a9）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。