eslint 自動格式化插件

微信截圖_20200720125517.png

首先在vscode中下載 ESLint 插件，隨后在setting中加入以下內容

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

隨后在保存的時候就可以自動格式化代碼而不用每次都手動調整了

eslint 規則

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

module.exports = {
  root: true,
  env: { // 運行環境
    node: true
  },
  'extends': [ // 繼承的規則
    '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], // 縮進2
    "eqeqeq": 2,//必須使用全等
    "no-multi-spaces": 0,//不能用多余的空格
    "no-inner-declarations": [2, "functions"],//禁止在塊語句中使用聲明（變量或函數）
    "no-irregular-whitespace": 2,//不能有不規則的空格
    "no-mixed-requires": [0, false],//聲明時不能混用聲明類型
    "no-mixed-spaces-and-tabs": [2, false],//禁止混用tab和空格
    "no-unused-vars": [2, {"vars": "all", "args": "after-used"}],//不能有聲明后未被使用的變量或參數
    "semi": [2, "never"],//語句強制分號結尾
    "sort-vars": 0,//變量聲明時排序
    "space-before-blocks": "error",//不以新行開始的塊{前面要不要有空格
    "comma-spacing": ["error", { "before": false, "after": true }], // 逗號后一定要有空格
    "space-unary-ops": [1, { "words": true, "nonwords": false }],//一元運算符的前/后要不要加空格
    "spaced-comment": 1,//注釋風格要不要有空格什么的,
    "space-infix-ops": 1,//中綴操作符周圍要不要有空格
    "no-trailing-spaces": 2, //一行結束后面有空格就發出警告
    "key-spacing": [0, { "beforeColon": false, "afterColon": true }],//對象字面量中冒號的前后空格
    "quotes": [1, "single"],//引號類型 `` "" ''
  }
}

eslint 命令行

此外，eslint 提供了命令行工具可以讓我們把項目內的文件全部都自動格式化

npm run lint