vs Code + Eslint + Prettier 代碼格式化

一、什么是Eslint

　　 通過查看eslint官網（官網傳送門），我們就可以知道，eslint就是一個用來識別 ECMAScript/JavaScript 並且按照規則給出報告的代碼檢測工具，主要用來檢測代碼風格是不是符合指定的規則/規范，這樣有利於團隊開發的時候代碼風格統一，.畢竟每個人的代碼風格不一致，使用eslint代碼校驗工具就保證了代碼風格的統一性。

二、什么Prettier

　　通過查看prettier官網（官網傳送門），我們就知道，prettier是一個代碼格式化工具，包括JavaScript (including experimental features)、JSX、Angular、Vue、Flow、TypeScript、CSS, Less, and SCSS、HTML、JSON、GraphQL、Markdown, including GFM and MDX、YAML各種語言，簡而言之，這個工具能夠使輸出代碼保持風格一致。

三、vs Code安裝相關插件

　　在這里我默認你已經安裝好了vs Code，如果還沒有安裝后者不知道怎么安裝也沒關系，可以查看安裝vs Code的其他博客，我這里不在贅述。vs Code安裝好之后，這里要介紹幾個常用的插件，可以靈活使用，以方便使用提高效率為原則。

　　1、Vetur:  vue語法高亮插件;

　　2、ESlint 語法錯誤檢測工具；

　　3、HTML Snippets 回車或按下Tab鍵生成標簽；

　　4、Auto Rename Tag 自動修改匹配的標簽；

　　5、prettier 代碼格式化工具；

四、vs Code格式化相關配置

　　vs Code格式化插件有很多，這里首推prettier，可以根據自己的需求進行配置，並且設置format on save，就會在代碼格式化的時候自動保存

{
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_line_length": 200,
            "wrap_attributes": "auto",
            "end_with_newline": false
        }
    },//函數前加空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "eslint.alwaysShowStatus": true,
    "eslint.autoFixOnSave": true,
    "eslint.workingDirectories": [
        ".eslintrc.js",
        {
            "mode": "auto"
        }
    ],
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        { "language": "vue", "autoFix": true }
    ],
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    //默認JavaScript格式化程序(為了更美觀)
    "javascript.format.enable": true,
 "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, 

 "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, 

 "[less]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, 

 "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, 

 /* prettier的配置 */ 

 "prettier.printWidth": 100, // 超過最大值換行 

 "prettier.tabWidth": 4, // 縮進字節數 

 "prettier.useTabs": false, // 縮進不使用tab，使用空格 

 "prettier.semi": true, // 句尾添加分號 

 "prettier.singleQuote": true, // 使用單引號代替雙引號 

 "prettier.proseWrap": "preserve", // 默認值。因為使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本樣式進行折行 

 "prettier.arrowParens": "avoid", // (x) => {} 箭頭函數參數只有一個時是否要有小括號。avoid：省略括號 

 "prettier.bracketSpacing": true, // 在對象，數組括號與文字之間加空格 "{ foo: bar }" 

 "prettier.disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化單獨設置 

 "prettier.endOfLine": "auto", // 結尾是 \n \r \n\r auto 

 "prettier.eslintIntegration": false, //不讓prettier使用eslint的代碼格式進行校驗 

 "prettier.htmlWhitespaceSensitivity": "ignore", 

 "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填寫在項目的.prettierignore文件中 

 "prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否單獨放一行 

 "prettier.jsxSingleQuote": false, // 在jsx中使用單引號代替雙引號 

 "prettier.parser": "babylon", // 格式化的解析器，默認是babylon 

 "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier 

 "prettier.stylelintIntegration": false, //不讓prettier使用stylelint的代碼格式進行校驗 

 "prettier.trailingComma": "es5", // 在對象或數組最后一個元素后面是否加逗號（在ES5中加尾逗號） 

 "prettier.tslintIntegration": false // 不讓prettier使用tslint的代碼格式進行校驗
}

五、eslint相關配置

　　eslint相關配置跟prettier結合起來，設置prettier的eslintIntegration屬性為true，就可以根據eslint相關配置規則格式化代碼，相關配置如下，更多配置規則請查看官網

　　

// https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true
    // "jest"：true
  },
  // required to lint *.vue files
  plugins: ['vue'],
  extends: ['plugin:vue/essential', 'standard'],
  // add your custom rules here
  rules: {
    // allow async-await
    camelcase: 'off',
    'no-console': 'error',
    'standard/no-callback-literal': 'off',
    'generator-star-spacing': 'off',
    'space-before-function-paren': [
      'error',
      {
        anonymous: 'always',
        named: 'never',
        asyncArrow: 'never'
      }
    ],
    'func-call-spacing': ['error', 'never'],
    'vue/no-mutating-props': 'nerve',
    // allow debugger during development
    // 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': 'error',
    'template-curly-spacing': 'off',
    quotes: ['error', 'single'],
    // 強制不使用分號結尾
    semi: ['error', 'never'],
    indent: [
      'error',
      2,
      {
        ignoredNodes: ['TemplateLiteral', 'ConditionalExpression'],
        SwitchCase: 1
      }
    ]
    // end 解決eslint報錯問題
  }
}

　　在setting.json中設置一下配置，可在格式化的時候自動安裝eslint規則修復不符合規范的代碼。

"eslint.validate": [
        "javascript",
        "javascriptreact",
        { "language": "vue", "autoFix": true }
    ],