vscode eslint+prettier配置(保存自动格式化)

VSCode 利用 elsint 和 prettier 实现代码自动格式化

1、VScode 配置

首先需要安装 Eslint、Prettier、Vetur 插件

2、安装 Eslint 依赖(已经安装了的不必再安装)

命令: npm i -D eslint babel-eslint eslint-plugin-vue @vue/cli-plugin-eslint

eslint: ESLint 的核心代码
babel-eslint: eslint 与 babel 整合包
eslint-plugin-vue @vue/cli-plugin-eslint: eslint 与 vue 整合包

3、安装 prettier 依赖(已经安装了的不必再安装)
命令: npm i -D prettier eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli

prettier：prettier 插件的核心代码
eslint-plugin-prettier：将 prettier 作为 ESLint 规范来使用
eslint-config-prettier：解决 ESLint 中的样式规范和 prettier 中样式规范的冲突，以 prettier 的样式规范为准，使 ESLint 中的样式规范自动失效
prettier-eslint-cli:prettier-eslint-cli 允许你对多个文件用 prettier-eslint 进行格式化。

4、配置 Eslint

在项目的根目录下，新建.eslintrc.js 文件，并将.eslintrc.js 里面的代码拷贝进去

5、Prettier 配置

在项目的根目录下创建.prettierrc.js 文件并将.prettierrc.js 里面的代码拷贝进去

6、setting 配置

打开 setting 将 settings.json 里面的代码黏贴进去，这样在 VScode 中保存（ctrl+s）的时候就会进行自动格式化

注意：在 vscode 中其实 Vetur 也有一套 Format 规则，因此会和 prettier 冲突。打开 setting-扩展-Vetur 将 Vetur 的规则改成 Prettier 就好了。
如果有需要忽略的文件可以在 .eslintignore 文件中进行配置

具体配置代码：
.eslintrc.js

module.exports = {
    root: true,
    parserOptions: {
      // 定义ESLint的解析器
      parser: "babel-eslint",
      sourceType: "module",
    },
    // 指定代码的运行环境
    env: {
      browser: true,
      node: true,
      es6: true,
    },
    extends: [
      //继承 vue 的标准特性
      "plugin:vue/essential",
      "eslint:recommended",
    ],
    // 自定义eslint规则，严格按照StandardJS
    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",
      // 两个空格缩进
      indent: [
        2,
        2,
        {
          SwitchCase: 1,
        },
      ],
      // 单引号
      quotes: [
        2,
        "single",
        {
          avoidEscape: true,
          allowTemplateLiterals: true,
        },
      ],
      // 未使用的变量
      "no-unused-vars": [
        2,
        {
          vars: "all",
          args: "after-used",
        },
      ],
      // 关键字前后空格
      "keyword-spacing": [
        2,
        {
          before: true,
          after: true,
        },
      ],
      // function关键字和函数名后面的空格
      "space-before-function-paren": [2, "never"],
      // 除了null,其他用===而不是==
      eqeqeq: ["error", "always", { null: "ignore" }],
      // 字符串拼接操作符直接用空格
      "space-infix-ops": 2,
      // 逗号前面不用空格，逗号后面用空格
      "comma-spacing": [
        2,
        {
          before: false,
          after: true,
        },
      ],
      // else必须和反花括号一行
      "brace-style": [
        2,
        "1tbs",
        {
          allowSingleLine: true,
        },
      ],
      // 多行 if 语句的的括号不能省
      curly: [2, "multi-line"],
      // 使用浏览器全局变量时加上 window. 前缀
      "no-undef": 2,
      // 不允许有连续多行空行
      "no-multiple-empty-lines": [
        2,
        {
          max: 1,
        },
      ],
      // 换行符在运算符的位置
      "operator-linebreak": [
        2,
        "after",
        {
          overrides: {
            "?": "before",
            ":": "before",
          },
        },
      ],
      // 条件语句中赋值语句
      "no-cond-assign": 2,
      // 单行代码块两边加空格
      "block-spacing": [2, "always"],
      // 对属性名强制使用驼峰
      camelcase: [
        0,
        {
          properties: "always",
        },
      ],
      // 不允许有多余的行末逗号
      "comma-dangle": [2, "never"],
      // 始终将逗号置于行末
      "comma-style": [2, "last"],
      // 点号操作符须与属性需在同一行
      "dot-location": [2, "property"],
      // 函数调用时标识符与括号间不留间隔
      "func-call-spacing": ["error", "never"],
      // 键值对当中冒号与值之间要留空白
      "key-spacing": [
        2,
        {
          beforeColon: false,
          afterColon: true,
        },
      ],
      // 构造函数要以大写字母开头, 但调用大写字母开头的函数不一定需要new
      "new-cap": [
        2,
        {
          newIsCap: true,
          capIsNew: false,
        },
      ],
      // 无参的构造函数调用时要带上括号
      "new-parens": 2,
      // 对象中定义了存值器，一定要对应的定义取值器
      "accessor-pairs": 2,
      // 子类的构造器中一定要调用 super
      "constructor-super": 2,
      // 使用数组字面量而不是构造器
      "no-array-constructor": "error",
      // 避免使用 arguments.callee 和 arguments.caller
      "no-caller": 2,
      // 避免对类名重新赋值
      "no-class-assign": 2,
      // 避免修改使用 const 声明的变量
      "no-const-assign": 2,
      // 正则中不要使用控制符
      "no-control-regex": "error",
      // 不要对变量使用 delete 操作。
      "no-delete-var": 2,
      // 不要定义冗余的函数参数
      "no-dupe-args": 2,
      // 类中不要定义冗余的属性
      "no-dupe-class-members": 2,
      // 对象字面量中不要定义重复的属性
      "no-dupe-keys": 2,
      // switch 语句中不要定义重复的 case 分支
      "no-duplicate-case": 2,
      // 同一模块有多个导入时一次性写完
      "no-duplicate-imports": "error",
      // 正则中不要使用空字符
      "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-new-func": "error",
      "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-sparse-arrays": 2,
      "no-template-curly-in-string": "error",
      "no-this-before-super": 2,
      "no-throw-literal": 2,
      "no-trailing-spaces": 2,
      "no-undef-init": 2,
      "no-unmodified-loop-condition": 2,
      "no-unneeded-ternary": [
        2,
        {
          defaultAssignment: false,
        },
      ],
      "no-unreachable": 2,
      "no-unsafe-finally": 2,
      "no-unsafe-negation": "error",
      "no-useless-call": 2,
      "no-useless-computed-key": 2,
      "no-useless-escape": 0,
      "no-useless-rename": 2,
      "no-whitespace-before-property": 2,
      "no-with": 2,
      "padded-blocks": [2, "never"],
      "rest-spread-spacing": ["error", "never"],
      "semi-spacing": [
        2,
        {
          before: false,
          after: true,
        },
      ],
      "space-before-blocks": [2, "always"],
      "space-in-parens": [2, "never"],
      "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"],
      // 分号
      semi: [2, "never"],
      "no-unexpected-multiline": 2,
      "arrow-spacing": [
        2,
        {
          before: true,
          after: true,
        },
      ],
      "eol-last": 2,
      "generator-star-spacing": [
        2,
        {
          before: true,
          after: true,
        },
      ],
      "handle-callback-err": [2, "^(err|error)$"],
      "jsx-quotes": [2, "prefer-single"],
      "no-array-constructor": 2,
      "no-console": "off",
      "no-native-reassign": 2,
      "no-negated-in-lhs": 2,
      "no-shadow-restricted-names": 2,
      "no-spaced-func": 2,
      "no-useless-constructor": 2,
      "one-var": [
        2,
        {
          initialized: "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"],
    },
    //当使用第三方的SDK时，eslint会报找不到，可以加入到globals，取消对这个的检查
    globals: {
      fengmap: true,
    },
  };

.prettierrc.js

module.exports = {
    // 最大长度80个字符
    printWidth: 80,
    // 行末分号
    semi: false,
    // 单引号
    singleQuote: true,
    // JSX双引号
    jsxSingleQuote: false,
    // 尽可能使用尾随逗号（包括函数参数）
    trailingComma: "none",
    // 在对象文字中打印括号之间的空格。
    bracketSpacing: true,
    // > 标签放在最后一行的末尾，而不是单独放在下一行
    jsxBracketSameLine: false,
    // 箭头圆括号
    arrowParens: "avoid",
    // 在文件顶部插入一个特殊的 @format 标记，指定文件格式需要被格式化。
    insertPragma: false,
    // 缩进
    tabWidth: 2,
    // 使用tab还是空格
    useTabs: false,
    // 行尾换行格式
    endOfLine: "auto",
    HTMLWhitespaceSensitivity: "ignore",
    extends: [
        //继承 vue 的标准特性
        "plugin:vue/essential",
        "eslint:recommended",
        //避免与 prettier 冲突
        "plugin:prettier/recommended",
      ]
  };

settings.json

{
    "workbench.colorTheme": "One Dark Pro",
    "eslint.enable": true,
    "eslint.options": {
      "extensions": [".js", ".vue", ".ts", ".tsx"]
    },
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "eslint.validate": [
      "vue",
      "html",
      "javascript",
      "typescript",
      "javascriptreact",
      "typescriptreact"
    ],
    "vetur.format.defaultFormatter.html": "prettier"
  }

注意：在 vscode 中其实 Vetur 也有一套 Format 规则，因此会和 prettier 冲突。打开 setting-扩展-Vetur 将 Vetur 的规则改成 Prettier 就好了。