还在每次写完代码以后，点击鼠标（或者使用快捷键）格式化文档让代码保持整齐？还在因为装了eslint后经常报出eslint校检语法错误而犯愁？——以至于装后又卸载eslint。这篇文章让你不再为语法校对烦恼，让你编程快到飞起。
项目地址：https://github.com/Ewall1106/mall
安装
- 当你构建一个新的项目的时候，就以构建一个新的 vue 项目来说，默认把 eslint 安装就好。
默认安装eslint
- 如果项目中没有安装，那就只能手动安装了。传送门：eslint 官网
$ npm install eslint --save-dev
配置 eslint
然后在eslintc.js中可以配置你的规则，在我们脚手架初始化
panda-mall项目的时候，这些东西都已经做好了。你可以根据自己的喜好自己去配置
rules.
module.exports = {
root: true,
env: {
node: true,
},
extends: ['plugin:vue/essential', '@vue/standard'],
parserOptions: {
parser: 'babel-eslint',
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'space-before-function-paren': 0,
},
};
- 在.eslintignore中可以设置你要忽略的文件：
build/*.js
src/assets
public
dist
vscode 中 eslint 扩展安装
- 我用的是 vscode，如果你是用的其他工具自行 google，反正原理都一样。
eslint扩展
- 进入到
setting.json文件中，添加一下代码：
"files.autoSave": "off",
"eslint.validate": [
"javascript",
"javascriptreact",
"vue-html",
{
"language": "vue",
"autoFix": true
}
],
"eslint.run": "onSave",
"eslint.autoFixOnSave": true,
- 很多人配置不成功大部分都是添加代码方式不对，特意上一份我的配置文件截图：
settings.json
结语
当你完成了如上所有的配置以后，当你
command+s（ctrl+s）点击保存的时候，eslint 就会帮你自动格式化以符合.eslintrc.js文件中的规则，让你编程快到飞起，不用再为了修复 eslint 报错的冲突而烦恼。你可以编辑自己的 eslint 规则或者直接拿别人的用：如饿了么团队的 config，vue 的 config。
效果预览.gif
你可能感兴趣：
Ewall的简书
手把手教你用vue+node+mongodb搭建一个小商场
小程序的因难见巧
看完你就该会git了
CSS日常踩坑后的总结
