vscode+vue-cli+eslint格式化代碼

eslint規(guī)范可以讓代碼看起來更清晰，也可以讓團隊協(xié)作合并代碼時減少格式化的沖突牢硅。寫了這么些時間的前端代碼伦泥，才想配置一下eslint剥啤，下面是本次配置的一些筆記，歡迎指正不脯。

vscode中安裝插件
- Eslint
- Prettier ESLint
- Vetur
項目根目錄中建立以下文件(若默認有的則不必新建)
- .eslintrc.js eslint規(guī)則配置文件
- .eslintignore eslint規(guī)則忽略校驗的配置，例如三方包或者自己自定。
- .pritterrc pritterrc配置文件谤专，當然也可以配置在setting中堡牡，我的理解是一個作用在本項目，一個作用在全部項目复局。
- .editorconfig
.eslintrc.js文件中選擇配置如下內(nèi)容冲簿，每個人的都可能不一樣。

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',
  // 不允許方法前加星號
   // 'generator-star-spacing': 'off',
  // 函數(shù)名后不要加空格亿昏，如果不是新建的項目峦剔，不想配置函數(shù)名后面加空格，那么可以修改eslint的規(guī)范來將就
  //'space-before-function-paren': 0,
  //"standard/no-callback-literal": 0 /** callback中可以傳參true,若這里不設(shè)置為0,則需要new Error(true) */
    quotes: ['error', 'single'], //強制使用單引號
    semi: ['error', 'never'], //強制不使用分號結(jié)尾
    eqeqeq: ['error', 'always'], // 強制在任何情況下都使用 === 和 !==
    'brace-style': ['error', '1tbs', { allowSingleLine: true }] //強制在代碼塊中使用一致的大括號風格
  },
  parserOptions: {
    ecmaVersion: 6,
    sourceType: 'module',
    parser: 'babel-eslint'
  }
}

.eslintignore

node_modules
public

.prettierrc

{
  "semi": false,
  "singleQuote": true,
  "printWidth": 80,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "none",
  "jsxBracketSameLine": false
}

.editorconfig

[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

打開用戶設(shè)置龙优，mac是comand+shift+p,windows是ctrl+shift+p,輸入setting羊异，打開settings(JSON)事秀。

{
    "editor.quickSuggestions": {
        "strings": true
    },
    "editor.tabSize": 2,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    //設(shè)置函數(shù)名后面加空格
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "vetur.completion.autoImport": true,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "editor.formatOnSave": true,
    // 設(shè)置不顯示文件
    "files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/CVS": true,
        "**/.DS_Store": true,
        "**/node_modules": true
    }
}

常用到vscode插件
- Auto Close Tag
- Auto Rename Tag
- Beautify
- HTML CSS Support
- JavaScript(ES6)
- Path Intellisense
- Vetur
- Vue VSCode Snippets

最后編輯于：2020.07.14 15:45:25

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者