eslint 自動(dòng)格式化插件

微信截圖_20200720125517.png

首先在vscode中下載 ESLint 插件，隨后在setting中加入以下內(nèi)容

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
}

隨后在保存的時(shí)候就可以自動(dòng)格式化代碼而不用每次都手動(dòng)調(diào)整了

eslint 規(guī)則

以下是我常用的規(guī)則，如果需要其他可在 https://eslint.bootcss.com/ 搜索

module.exports = {
  root: true,
  env: { // 運(yùn)行環(huán)境
    node: true
  },
  'extends': [ // 繼承的規(guī)則
    'plugin:vue/recommended',
    'eslint:recommended',
    '@vue/typescript/recommended'
  ],
  parserOptions: { // 編譯器
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'space-before-function-paren': ['error', 'always'], // 方法前必須有空格
    "indent": [1, 2], // 縮進(jìn)2
    "eqeqeq": 2,//必須使用全等
    "no-multi-spaces": 0,//不能用多余的空格
    "no-inner-declarations": [2, "functions"],//禁止在塊語句中使用聲明（變量或函數(shù)）
    "no-irregular-whitespace": 2,//不能有不規(guī)則的空格
    "no-mixed-requires": [0, false],//聲明時(shí)不能混用聲明類型
    "no-mixed-spaces-and-tabs": [2, false],//禁止混用tab和空格
    "no-unused-vars": [2, {"vars": "all", "args": "after-used"}],//不能有聲明后未被使用的變量或參數(shù)
    "semi": [2, "never"],//語句強(qiáng)制分號(hào)結(jié)尾
    "sort-vars": 0,//變量聲明時(shí)排序
    "space-before-blocks": "error",//不以新行開始的塊{前面要不要有空格
    "comma-spacing": ["error", { "before": false, "after": true }], // 逗號(hào)后一定要有空格
    "space-unary-ops": [1, { "words": true, "nonwords": false }],//一元運(yùn)算符的前/后要不要加空格
    "spaced-comment": 1,//注釋風(fēng)格要不要有空格什么的,
    "space-infix-ops": 1,//中綴操作符周圍要不要有空格
    "no-trailing-spaces": 2, //一行結(jié)束后面有空格就發(fā)出警告
    "key-spacing": [0, { "beforeColon": false, "afterColon": true }],//對(duì)象字面量中冒號(hào)的前后空格
    "quotes": [1, "single"],//引號(hào)類型 `` "" ''
  }
}

eslint 命令行

此外，eslint 提供了命令行工具可以讓我們把項(xiàng)目內(nèi)的文件全部都自動(dòng)格式化

npm run lint