[TOC] ### 1. 安装插件（保存时使用eslint进行代码检查） ~~~ "@vue/cli-plugin-eslint": "^3.0.3", "@vue/eslint-config-airbnb": "^3.0.3", npm i@vue/cli-plugin-eslint && yarn add @vue/cli-plugin-eslint ~~~ ### 2. 创建.eslintrc.js文件 ~~~ module.exports = { root: true, env: { node: true }, extends: ['plugin:vue/essential', '@vue/airbnb'], rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 在这里自定义修改 'linebreak-style': 0, semi: [2, 'never'], // 不加分号 'no-unused-expressions': [2, { allowShortCircuit: true, allowTernary: true }], // 允许三元 'no-plusplus': 0, // 开启i++ 'comma-dangle': [2, 'never'], // 结尾不使用逗号 'import/no-unresolved': [2, { ignore: ['esri', 'dojo'] }], // 解决import esri/xxx编译不通过 'import/extensions': 0, // 'no-console': 0, 'arrow-parens': [2, 'as-needed'], // 箭头函数参数只有一个时无需加括号 'no-param-reassign': [2, { props: false }], 'no-mixed-operators': 0, // 'max-len': [2, {"code": 120} ], 'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }] }, parserOptions: { parser: 'babel-eslint' } } ~~~ ### 3. 创建[prettier配置]([https://segmentfault.com/a/1190000014613058](https://segmentfault.com/a/1190000014613058))（自动解决eslint中发现的问题） 1. 安装插件 ~~~ "prettier": "^1.15.3", ~~~ 2. 配置prettier.config.js ~~~ /* prettier配置项 */ module.exports = { "printWidth": 100, //一行的字符数，如果超过会进行换行，默认为80 "tabWidth": 2, //一个tab代表几个空格数，默认为80 "useTabs": false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减 "singleQuote": true, //字符串是否使用单引号，默认为false，使用双引号 "semi": false, //行位是否使用分号，默认为true "trailingComma": "none", //是否使用尾逗号，有三个可选值"<none|es5|all>" "bracketSpacing": true, //对象大括号直接是否有空格，默认为true，效果：{ foo: bar } }; ~~~ ### 4、husky，lint-staged（使用git进行commit时格式化代码），prettier配合使用 [链接]([https://www.jianshu.com/p/cdd749c624d9](https://www.jianshu.com/p/cdd749c624d9)) #### 使用 husky 的具体做法如下： 首先，安装依赖： ~~~ npm install -D husky yarn add --dev husky ~~~ 然后修改 package.json，增加配置： ~~~ { "scripts": { "precommit": "eslint src/**/*.js" } } ~~~ 最后尝试 Git 提交，你就会很快收到反馈： ~~~ git commit -m "Keep calm and commit" ~~~ #### lint-staged 用法如下： 首先，安装依赖： ~~~ npm install -D lint-staged yarn add --dev lint-staged ~~~ 然后，修改 package.json 配置： ~~~ { "scripts": { "precommit": "lint-staged" }, "lint-staged": { "src/**/*.js": "eslint" } } ~~~ 最后，尝试提交的效果： 实际上，lint-staged 给了你提交前代码操作的更大自由度，比如使用下面的配置，自动修复错误： ~~~ { "scripts": { "precommit": "lint-staged" }, "lint-staged": { "src/**/*.js": ["eslint --fix", "git add"] } } ~~~ 或者使用下面的配置，自动格式化代码（谨慎使用）： ~~~ { "scripts": { "precommit": "lint-staged" }, "lint-staged": { "src/**/*.js": ["prettier --write", "git add"] } } ~~~