vscode中使用 ESLint && Prettier 規范代碼格式

第一步：配置vscode-文件-首選項-setting.json里面的配置信息，設置點擊保存時，根據 eslint 規則自定修復，同時集成 prettier 到 eslint 中，關閉編譯器自帶的代碼檢查規則

2：在項目 package.json中修改 prettier配置規則，允許在句尾添加逗號："trailingComma": "all",

  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/prettier"
    ],
    "rules": {
      "no-console": "off",
      "prettier/prettier": [
        "error",
        {
          "singleQuote": true,
          "trailingComma": "all", "bracketSpacing": true,
          "jsxBracketSameLine": true
        }
      ]
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },

3：可以在項目根目錄下面的.prettierrc.json 文件中繼續配置 prettier：

{
  "singleQuote": true,
  "semi": false
}

 

// "singleQuote": true, 使用單引號而不是雙引號 ， "semi": true ,在語句結尾處添加分號,false就是不添加分號

4：保持 eslint與prettier的配置格式一樣，代碼校驗才不會沖突，

項目根目錄添加 eslintrc.js 文件：

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['plugin:vue/essential', 'eslint:recommended'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    //強制使用單引號
    quotes: ['error', 'single'],
    //強制不使用分號結尾
    semi: ['error', 'never'],
    'comma-dangle': ['error', 'always-multiline'], // 多行對象字面量項尾總是有逗號
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
}