vscode 配置代码自动格式化加修复

╰+哭是因爲堅強的太久メ 2022-12-17 13:57 378阅读 0赞

> 子曰：“工欲善其事，必先利其器”, 编码必须的就是有一个顺手的ide，然而光有还不行，还要懂得配置，毕竟不同的团队代码规范不同，如目前用得较多的就是eslint，今天就顺便记录下vscode + eslint 配置代码检测

### 文章目录 ###

*   *   *   *  一、安装 Eslint
             *  二、安装 Prettier-Code formatter
             *  三、安装Vetur
             *  四、配置 setting.json
             *  五、配置 .eslintrc.js
             *  六、配置 .editorconfig

#### 一、安装 Eslint ####

首选得在ide安装`eslint`插件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70_pic_center]

#### 二、安装 Prettier-Code formatter ####

目前新的vscode 都需要安装这个 代码格式化插件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70_pic_center 1]

否则会提示 `Extension 'esbenp.prettier-vscode' is configured as formatter but not available. Select a different default formatter to continue.`

#### 三、安装Vetur ####

目前vue 用的比较多，当然避不了的使用一个格式.vue的文件，如：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70_pic_center 2]

#### 四、配置 setting.json ####

找到`File > Preference > Settings > Text Editor > Code Actions On Save > Edit in setting.json`打开进行编辑  
截图如![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70_pic_center 3]

添加如下的配置到你的`setting.json` (这个注释很全就不过得解释了)

{ 
        "workbench.startupEditor": "newUntitledFile",
        "window.zoomLevel": 1, // window be show of level in ide
        "git.ignoreMissingGitWarning": true,
        "explorer.confirmDelete": false,
        "workbench.colorTheme": "Monokai",
        "workbench.colorCustomizations": { 
            "[Monokai]": { 
            "editor.background": "#1a2c1c",
            "sideBar.background": "#2a3b2d",
            "activityBar.background": "#7154978a",
            "icon.foreground": "#893ecf",
            "activityBar.inactiveForeground": "#ffee00b4",
            },
        },
        "docthis.authorName": "tomAnny",
        "docthis.includeDescriptionTag": true,
        "docthis.includeDateTag": true,
        "docthis.includeAuthorTag": true,
        "vsicons.dontShowNewVersionMessage": true,
        "terminal.integrated.rendererType": "dom",
        // vscode默认启用了根据文件类型自动设置tabsize的选项
        "editor.detectIndentation": false,
        // 重新设定tabsize
        "editor.tabSize": 2,
        // #每次保存的时候自动格式化 
        "editor.formatOnSave": true,
        "editor.formatOnType": true,
        // 强制单引号
        "prettier.singleQuote": true,
        "prettier.semi": false,
        // 尽可能控制尾随逗号的打印
        "prettier.trailingComma": "all",
        // #这个按用户自身习惯选择-- prettier 或者js-beautify-html
        "vetur.format.defaultFormatter.html": "js-beautify-html",
        // #让vue中的js按编辑器自带的ts格式进行格式化 
        "vetur.format.defaultFormatter.js": "vscode-typescript",
        "html.format.indentHandlebars": true,
        "javascript.preferences.quoteStyle": "single",
        "typescript.preferences.quoteStyle": "single",
        "html.format.enable": false,
        "html.format.preserveNewLines": false,
        "diffEditor.ignoreTrimWhitespace": false,
        "vetur.format.defaultFormatterOptions": { 
          "js-beautify-html": { 
            "wrap_attributes": "force-aligned"
            // #vue组件中html代码格式化样式
          }
        },
        //防止VSCode启动带有node_modules的项目的时候很卡的问题
        "search.followSymlinks": false,
        "files.autoSave": "onWindowChange",
        "[vue]": { 
          //"editor.defaultFormatter": "octref.vetur"
          "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
        "[javascript]": { 
          "editor.defaultFormatter": "HookyQR.beautify"
        },
        "[scss]": { 
          "editor.defaultFormatter": "HookyQR.beautify"
        },
        "[html]": { 
          "editor.defaultFormatter": "HookyQR.beautify"
        },
        "[css]": { 
          "editor.defaultFormatter": "HookyQR.beautify"
       },
        // #每次保存的时候将代码按eslint格式进行修复
        "editor.codeActionsOnSave": { 
          "source.fixAll.eslint": true
        },
      }

具体配置可以参考[官网 https://code.visualstudio.com/docs/getstarted/settings][https_code.visualstudio.com_docs_getstarted_settings]

#### 五、配置 .eslintrc.js ####

现在需要将项目中对应的`elsintrc.js`配置一下，来规范整个项目的代码风格，避免团队人员多了，代码五花八门,

个人配置大概如下：

module.exports = { 
      root: true,
      parserOptions: { 
        parser: 'babel-eslint',
        sourceType: 'module'
      },
      env: { 
        browser: true,
        node: true,
        es6: true,
      },
      extends: ['plugin:vue/recommended', 'eslint:recommended'],
    
      // add your custom rules here
      //it is base on https://github.com/vuejs/eslint-config-vue
      rules: { 
        "vue/max-attributes-per-line": [2, { 
          "singleline": 10,
          "multiline": { 
            "max": 1,
            "allowFirstLine": false
          }
        }],
        "vue/singleline-html-element-content-newline": "off",
        "vue/multiline-html-element-content-newline":"off",
        "vue/name-property-casing": ["error", "PascalCase"],
        "vue/no-v-html": "off",
        'accessor-pairs': 2,
        'arrow-spacing': [2, { 
          'before': true,
          'after': true
        }],
        'block-spacing': [2, 'always'],
        'brace-style': [2, '1tbs', { 
          'allowSingleLine': true
        }],
        'camelcase': [0, { 
          'properties': 'always'
        }],
        'comma-dangle': [2, 'never'],
        'comma-spacing': [2, { 
          'before': false,
          'after': true
        }],
        'comma-style': [2, 'last'],
        'constructor-super': 2,
        'curly': [2, 'multi-line'],
        'dot-location': [2, 'property'],
        'eol-last': 2,
        'eqeqeq': ["error", "always", { "null": "ignore"}],
        'generator-star-spacing': [2, { 
          'before': true,
          'after': true
        }],
        'handle-callback-err': [2, '^(err|error)$'],
        'indent': [2, 2, { 
          'SwitchCase': 1
        }],
        'jsx-quotes': [2, 'prefer-single'],
        'key-spacing': [2, { 
          'beforeColon': false,
          'afterColon': true
        }],
        'keyword-spacing': [2, { 
          'before': true,
          'after': true
        }],
        'new-cap': [2, { 
          'newIsCap': true,
          'capIsNew': false
        }],
        'new-parens': 2,
        'no-array-constructor': 2,
        'no-caller': 2,
        'no-console': 'off',
        'no-class-assign': 2,
        'no-cond-assign': 2,
        'no-const-assign': 2,
        'no-control-regex': 0,
        'no-delete-var': 2,
        'no-dupe-args': 2,
        'no-dupe-class-members': 2,
        'no-dupe-keys': 2,
        'no-duplicate-case': 2,
        'no-empty-character-class': 2,
        'no-empty-pattern': 2,
        'no-eval': 2,
        'no-ex-assign': 2,
        'no-extend-native': 2,
        'no-extra-bind': 2,
        'no-extra-boolean-cast': 2,
        'no-extra-parens': [2, 'functions'],
        'no-fallthrough': 2,
        'no-floating-decimal': 2,
        'no-func-assign': 2,
        'no-implied-eval': 2,
        'no-inner-declarations': [2, 'functions'],
        'no-invalid-regexp': 2,
        'no-irregular-whitespace': 2,
        'no-iterator': 2,
        'no-label-var': 2,
        'no-labels': [2, { 
          'allowLoop': false,
          'allowSwitch': false
        }],
        'no-lone-blocks': 2,
        'no-mixed-spaces-and-tabs': 2,
        'no-multi-spaces': 2,
        'no-multi-str': 2,
        'no-multiple-empty-lines': [2, { 
          'max': 1
        }],
        'no-native-reassign': 2,
        'no-negated-in-lhs': 2,
        'no-new-object': 2,
        'no-new-require': 2,
        'no-new-symbol': 2,
        'no-new-wrappers': 2,
        'no-obj-calls': 2,
        'no-octal': 2,
        'no-octal-escape': 2,
        'no-path-concat': 2,
        'no-proto': 2,
        'no-redeclare': 2,
        'no-regex-spaces': 2,
        'no-return-assign': [2, 'except-parens'],
        'no-self-assign': 2,
        'no-self-compare': 2,
        'no-sequences': 2,
        'no-shadow-restricted-names': 2,
        'no-spaced-func': 2,
        'no-sparse-arrays': 2,
        'no-this-before-super': 2,
        'no-throw-literal': 2,
        'no-trailing-spaces': 2,
        'no-undef': 2,
        'no-undef-init': 2,
        'no-unexpected-multiline': 2,
        'no-unmodified-loop-condition': 2,
        'no-unneeded-ternary': [2, { 
          'defaultAssignment': false
        }],
        'no-unreachable': 2,
        'no-unsafe-finally': 2,
        'no-unused-vars': [2, { 
          'vars': 'all',
          'args': 'none'
        }],
        'no-useless-call': 2,
        'no-useless-computed-key': 2,
        'no-useless-constructor': 2,
        'no-useless-escape': 0,
        'no-whitespace-before-property': 2,
        'no-with': 2,
        'one-var': [2, { 
          'initialized': 'never'
        }],
        'operator-linebreak': [2, 'after', { 
          'overrides': { 
            '?': 'before',
            ':': 'before'
          }
        }],
        'padded-blocks': [2, 'never'],
        'quotes': [2, 'single', { 
          'avoidEscape': true,
          'allowTemplateLiterals': true
        }],
        'semi': [2, 'never'],
        'semi-spacing': [2, { 
          'before': false,
          'after': true
        }],
        'space-before-blocks': [2, 'always'],
        'space-before-function-paren': [2, 'never'],
        'space-in-parens': [2, 'never'],
        'space-infix-ops': 2,
        'space-unary-ops': [2, { 
          'words': true,
          'nonwords': false
        }],
        'spaced-comment': [2, 'always', { 
          'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
        }],
        'template-curly-spacing': [2, 'never'],
        'use-isnan': 2,
        'valid-typeof': 2,
        'wrap-iife': [2, 'any'],
        'yield-star-spacing': [2, 'both'],
        'yoda': [2, 'never'],
        'prefer-const': 2,
        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
        'object-curly-spacing': [2, 'always', { 
          objectsInObjects: false
        }],
        'array-bracket-spacing': [2, 'never']
      }
    }

关于该`ESlint` 配置详解请移步 [ESlint配置详解][ESlint]这一篇进行查看

#### 六、配置 .editorconfig ####

再配置一个代码 空格，缩进、换行等规范

看看官方对这个`editor`的介绍

> What is EditorConfig?  
> EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs. The EditorConfig project consists of a file format for defining coding styles and a collection of text editor plugins that enable editors to read the file format and adhere to defined styles. EditorConfig files are easily readable and they work nicely with version control systems.

# https://editorconfig.org
    root = true
    
    [*]
    charset = utf-8
    indent_style = space
    indent_size = 2
    end_of_line = lf
    insert_final_newline = true
    trim_trailing_whitespace = true
    
    [*.md]
    insert_final_newline = false
    trim_trailing_whitespace = false

OK 配置完成现在可以开始开心的编码了(闲时整理忙时用，避免一台新电脑片地找配置)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221122/2aa9560f91eb4bb9a489e3c14ef4f7a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221122/d1d6913fb3654c39ba9f1d56259b9e85.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221122/68781713bf5449c19f2e9f8f12db8e86.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221122/31e2d33123c844f2a99b24a6013ed071.png
[https_code.visualstudio.com_docs_getstarted_settings]: https://code.visualstudio.com/docs/getstarted/settings
[ESlint]: https://blog.csdn.net/qq_34817440/article/details/102994877