记录ESlint配置一次

项目在多人合作时，代码格式化时不统一是个大问题。建议大家的编辑器配置统一，开启eslint，让代码看起来风格统一。

1. vscode编辑器安装插件

1. Prettier - Code formatter
2. ESlint

2. 根目录创建.vscode文件，内容如下

// .vscode/settings.json 
// 该文件会覆盖vscode编辑器中的settings.json,该文件没有的配置会使用vscode编辑器中的配置
{
  "eslint.enable": true,
  "eslint.options": {
    "extensions": [
      ".js",
      ".vue",
      ".ts",
      ".tsx"
    ]
  },
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "vue",
    "html",
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact"
  ],
  "vetur.format.defaultFormatter.html": "prettier"
}

3. 安装依赖包

"eslint": "^6.8.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
"eslint-plugin-vue": "^6.2.2",
"@vue/cli-plugin-eslint": "^4.1.0",
"@vue/eslint-config-standard": "^5.1.2",
"babel-eslint": "^10.0.3",

4. 根目录下创建.editorconfig文件，内容如下

# http://editorconfig.org
root = true

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

[*.md]
insert_final_newline = false
trim_trailing_whitespace = false

5. 根目录下创建.eslintignore，内容如下

build/*.js
src/assets
public
dist

6. 根目录下创建eslintrc.js ，内容如下

{
  "name": "etb_home",
  "version": "1.0.0",
  "description": "招采e贷数据可视化系统",
  "author": "Pan <panfree23@gmail.com>",
  "scripts": {
    "dev": "vue-cli-service serve",
    "build:prod": "vue-cli-service build",
    "build:stage": "vue-cli-service build --mode staging",
    "build:dev": "vue-cli-service build --mode development",
    "lint": "eslint --ext .js,.vue src",
    "lint:fix": "eslint --fix --ext .js,.vue src",
    "test:unit": "jest --clearCache && vue-cli-service test:unit",
    "test:ci": "npm run lint && npm run test:unit"
  },
  "dependencies": {
    "@antv/layout": "^0.3.13",
    "@antv/x6": "^2.1.4",
    "@babel/plugin-transform-runtime": "^7.14.5",
    "@babel/polyfill": "^7.12.1",
    "@riophae/vue-treeselect": "^0.4.0",
    "@tinymce/tinymce-vue": "^3.0.1",
    "@vue/cli-plugin-babel": "4.4.4",
    "ans-ui": "1.1.9",
    "babel-polyfill": "^6.26.0",
    "bpmn-js": "^8.8.2",
    "clipboard": "^2.0.11",
    "codemirror": "^6.0.1",
    "core-js": "3.6.5",
    "d3": "^7.8.1",
    "dayjs": "^1.11.7",
    "echarts": "^5.3.3",
    "echarts-stat": "^1.2.0",
    "element-ui": "^2.15.6",
    "file-saver": "^2.0.5",
    "js-cookie": "2.2.0",
    "jsencrypt": "^3.2.1",
    "lodash": "^4.17.21",
    "lottie-web": "^5.7.12",
    "moment": "^2.29.4",
    "moment-timezone": "^0.5.40",
    "normalize.css": "^8.0.1",
    "nprogress": "0.2.0",
    "ramda": "^0.28.0",
    "tinymce": "^5.10.7",
    "vue": "^2.6.14",
    "vue-clipboard2": "^0.3.3",
    "vue-codemirror": "^6.1.1",
    "vue-loader": "^15.9.2",
    "vue-router": "3.0.6",
    "vuedraggable": "^2.24.3",
    "vuex": "^3.6.2",
    "vuex-persistedstate": "^3.2.1",
    "vxe-table": "^3.6.9",
    "xe-utils": "^3.5.7"
  },
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "4.4.4",
    "@vue/cli-service": "4.4.4",
    "@vue/test-utils": "1.0.0-beta.29",
    "autoprefixer": "9.5.1",
    "axios": "^0.27.2",
    "babel-eslint": "10.1.0",
    "babel-plugin-dynamic-import-node": "2.3.3",
    "eslint": "6.7.2",
    "eslint-plugin-vue": "6.2.2",
    "html-webpack-plugin": "3.2.0",
    "sass": "1.26.8",
    "sass-loader": "8.0.2",
    "script-ext-html-webpack-plugin": "2.1.3",
    "script-loader": "^0.7.2",
    "svg-sprite-loader": "4.1.3",
    "vue": "^2.6.14",
    "vue-style-loader": "^4.1.1",
    "vue-template-compiler": "2.6.14"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 10"
  ],
  "engines": {
    "node": ">=8.9",
    "npm": ">= 3.0.0"
  },
  "license": "MIT"
}

7.根目录下创建.prettierrc.js文件，内容如下

module.exports = {
    // 最大长度80个字符
    printWidth: 300,
    // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
    singleQuote: true,
    // 行末分号, 默认true
    semi: false,
    // JSX双引号
    jsxSingleQuote: false,
    // 尽可能使用尾随逗号（包括函数参数）,默认none,可选 none|es5|all
    // es5 包括es5中的数组、对象
    // all 包括函数对象等所有可选
    trailingComma: 'none',
    // 在对象文字中打印括号之间的空格。 默认true
    bracketSpacing: true,
    // 箭头函数参数括号 默认avoid 可选 avoid| always
    // avoid 能省略括号的时候就省略 例如x => x
    // always 总是有括号
    arrowParens: 'avoid',
    // 在文件顶部插入一个特殊的 @format 标记，指定文件格式需要被格式化。
    insertPragma: false,
    // 行尾换行格式
    endOfLine: 'auto',
    // html空格敏感度
    htmlWhitespaceSensitivity: 'ignore',
    // tab缩进大小,默认为2
    tabWidth: 2,
    // 使用tab缩进还是空格，默认false
    useTabs: true,
    // vue缩进脚本和样式
    vueIndentScriptAndStyle: false,
    // > 标签放在最后一行的末尾，而不是单独放在下一行 默认false
    jsxBracketSameLine: false,
}