VsCode配置ESLint自動格式化

安裝ESLint插件

配置文件進行配置

找到"文件" -> "首選項" -> "設置"(或者： File->Preferences->Settings )，點擊右上角，切換到setting.json配置文件

追加以下代碼：

{
    // vscode默認啟用了根據文件類型自動設置tabsize的選項
    "editor.detectIndentation": false,
    // 重新設定tabsize
    "editor.tabSize": 4,
    // #每次保存的時候自動格式化
    "editor.formatOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],
    // #每次保存的時候將代碼按eslint格式進行修復
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    //  #讓prettier使用eslint的代碼格式進行校驗
    "prettier.eslintIntegration": true,
    //  #去掉代碼結尾的分號
    "prettier.semi": false,
    //  #使用帶引號替代雙引號
    "prettier.singleQuote": true,
    //  #讓函數(名)和后面的括號之間加個空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    // #讓vue中的js按編輯器自帶的ts格式進行格式化
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned"
            // #vue組件中html代碼格式化樣式
        }
    },
    "window.zoomLevel": 0,
    "explorer.confirmDelete": false,
    "explorer.confirmDragAndDrop": false,
    "editor.renderControlCharacters": true,
    "editor.renderWhitespace": "all"
}

Vue項目中的EsLint配置

一般在使用Vue-Cli生成項目的時候，ESlint就已經進行了配置，這里貼出來的是ESLint的默認配置，沒有配置的可以使用這個默認配置

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        jest: true
      }
    }
  ]
}