vue使用eslint+prettier+airbnb

编辑器安装扩展eslint和prettier，vscode配置如下

{
+    "editor.formatOnSave": true, // prettier：保存自动格式
+    "editor.codeActionsOnSave": { 
+        "source.fixAll.eslint": true, // eslint --fix:保存自动修复fix
+    }
}

配置eslint

全局安装依赖：npm i -g eslint
跟目录安装依赖：npm i --save-dev eslint

在项目根目录cmd：eslint --init，会提示选择的风格如下图，eslint版本不一样选择风格有差异，成功后在根目录会生成一个.eslintrc.js文件

图片蓝色部分是已选择的项，最后一步? Would you like to install them now with npm? No我选择No，等init完成后再用npm依赖 npm i --save-dev eslint-plugin-vue eslint-config-airbnb-base eslint-plugin-import，npm i eslint-import-resolver-alias -D

// .eslintrc.js 文件
module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
-   "extends": "airbnb-base",
+   extends: ['plugin:vue/essential', 'airbnb-base'],
+   "settings": {
+       // 别名
+       'import/resolver': {
+           "alias": {
+               "map": [
+                   ['@', './src/'],
+                   ['@scss', './src/styles/'],
+               ],
+               "extensions": ['.js', '.vue'],    
+           },
+       },
+       // 扩展文件
+       'import/extensions': ['.js', '.vue'],
+   },
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
};

配置prettier

1. 安装依赖 npm i --save-dev eslint-config-prettier prettier
   
2. 在项目根目录新建文件.prettierrc

{
  "printWidth": 80, //一行的字符数，如果超过会进行换行，默认为80
  "tabWidth": 2, //一个tab代表几个空格数，默认为8
  "useTabs": false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减
  "singleQuote": false, //字符串是否使用单引号，默认为false，使用双引号
  "semi": true, //行位是否使用分号，默认为true
  "trailingComma": "none", //是否使用尾逗号，有三个可选值"<none|es5|all>"
  "bracketSpacing": true, //对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
  "parser": "babylon" //代码的解析引擎，默认为babylon，与babel相同。
}

3. 修改.eslintrc.js文件

extends: ['plugin:vue/essential', 'airbnb-base', 'prettier'], // 添加了prettier

配置编辑器规则

在根目录下新建文件.editorconfig

# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab