工做中遇到的vscode配合eslint完成保存爲eslint格式

vscode我的設置

// vscode的我的設置配置
{
  "workbench.iconTheme": "vscode-icons",
  "workbench.colorTheme": "Dracula Italics",
  "vetur.format.defaultFormatter.js": "prettier",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "editor.quickSuggestions": {
    "strings": true
  },
  "eslint.autoFixOnSave": true,
  // "eslint.nodePath": "D:/develop/nvm/nodejs",
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "eslint.options": {
    "plugins": [
      "html"
    ],
    "configFile": "項目目錄下.eslintrc.js絕對路徑"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue",
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    }
  ],
  "prettier.disableLanguages": [
    "vue",
    "js"
  ],
  "prettier.singleQuote": true,
  "prettier.semi": false,
  "prettier.stylelintIntegration": true,
}

// eslintrc.js配置
module.exports = {
  root: true,
  // EsLint默認使用esprima作腳本解析，也能夠切換他，好比切換成babel-eslint解析
  parser: 'babel-eslint',
  parserOptions: {
    //指定來源的類型，有兩種」script」或」module」
    sourceType: 'module'
  },
  // Environment能夠預設好的其餘環境的全局變量，如brower、node環境變量、es6環境變量、mocha環境變量等
  env: {
    browser: true
  },
  // Extends是EsLint默認推薦的驗證，你能夠使用配置選擇哪些校驗是你所須要的，能夠登陸npmjs.com查看
  extends: 'standard',
  // required to lint *.vue files
  plugins: ['vue', 'html'],
  // add your custom rules here
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // 箭頭函數的參數使用圓括號,0是關閉規則"off"，1是警告"warn"，2是報錯"error"
    'arrow-parens': 0,
    // 強制 generator 函數中 * 號周圍使用一致的空格
    'generator-star-spacing': 0,
    // 函數週圍空格的設置
    'space-before-function-paren': [
      'error',
      {
        anonymous: 'never',
        named: 'never',
        asyncArrow: 'always'
      }
    ],
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // 要求使用error對象做爲promise拒絕的緣由
    'prefer-promise-reject-errors': 'off',
    'padded-blocks': 0
  }
}

vscode插件安裝

1. beautify 美化代碼 好像沒用到 安全起見先加上
2. Bracket Pair Colorizer 美化括號 讓你的括號看起來更好看
3. Dracula theme 一個主題 隨便裝不裝
4. Dracula Theme with Italic keywords 剛纔那個主題的配套設施，內容看起來是斜體，有點意思
5. EditorConfig for Visual Studio Code 代碼風格配置插件
6. eslint 很少說 就裝吧
7. JavaScript standard style standard標準編碼風格
8. Path Intellisense 自動完善路徑
9. prettier 代碼格式化
10. veture vue大禮包
11. vscode-icons 美化圖標

須要的項目環境

1. npm install eslint eslint-plugin-html babel-eslint eslint-plugin-vue eslint-config-standard eslint-friendly-formatter --save-dev
2. npm install eslint-loader eslint-plugin-import eslint-plugin-node eslint-plugin-promise --save-dev
3. 能夠全局裝 也能夠項目裝，不要全局安裝和本地安裝混合，那樣在執行命令的時候全局容易找不到本地的配置，本地找不到全局的包
4. node_modules/.bin/eslint --fix path/to/要eslint的文件 能夠對文件進行eslint規則修復

參考文檔

1. eslint中文官網
2. 語言檢測配置說明博客
3. eslint入門博客