vscode 中格式化代码[vue2支持，插件ESLint、Prettier、Vetur]

1. 安装vscode插件

• ESLint

• Prettier formatter for Visual Studio Code

• Vetur

2. 配置文件

.editorconfig

root = true[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = truetrim_trailing_whitespace = truetab_width = 1

.eslintrc.js

// https://eslint.org/docs/user-guide/configuringmodule.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
  },
  extends: [    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential',    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard'
  ],  // required to lint *.vue files
  plugins: [    'vue'
  ],  // add your custom rules here
  rules: {    // 融合了 jquery 所以暂时屏蔽
    "no-undef": 0, //不允许未声明的变量
    "no-unused-vars": [0, {"vars": "all", "args": "after-used"}], //不允许有声明后未使用的变量或者参数
    "no-tabs": 0, //不允许tabs

    "no-mixed-spaces-and-tabs": [0, "smart-tabs"], //不允许混用tab和空格
    "indent": [0, 4],//缩进风格
    "camelcase": [0, {"properties": "never"}], //强制驼峰命名规则
    "space-before-function-paren": [0, {"anonymous": "always", "named": "never"}], //函数定义时括号前的空格

    // allow paren-less arrow functions
    'arrow-parens': 0,    'no-extra-semi': 0, //不允许出现不必要的分号

    // allow async-await
    'generator-star-spacing': 'off',    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

用户设置 setting.json

{  "files.autoSave": "afterDelay",  "editor.fontSize": 14,  "editor.tabSize": 2,  "eslint.autoFixOnSave": true,  "eslint.validate": [    "javascript",    "javascriptreact",    "vue",
    {      "language": "html",      "autoFix": true
    }
  ],  "prettier.singleQuote": true,  "prettier.semi": false}

3. 使用

• 方式一：右键格式化代码

• 方式二：打开命令面板 （>eslint fix all auto-fixable problems）

作者：会煮咖啡的猫咪
链接：https://www.jianshu.com/p/879456a0d925
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。