VSCode 代码风格统一设置eslint + stylelint

Posted 2021-06-26 优小U

文章目录

• 1. 安装依赖
• 2. 配置
• • 2.1 eslint配置
  • 2.2 stylelint配置
  • 2.3 VSCode 配置保存自动修复错误

1. 安装依赖

"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"stylelint": "^13.13.1",
"stylelint-config-standard": "^22.0.0"

2. 配置

2.1 eslint配置

以下主要是考虑到代码格式化及可自动修复的常用配置，具体配置可查看官网配置：
https://eslint.org/docs/rules/

vue相关的eslint插件：
https://eslint.vuejs.org/rules/

如果eslint配置少可以直接配置在package.json的eslintConfig属性，如果配置很多最好单独创建配置文件，如下：

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  extends: [
    "plugin:vue/recommended", 
    "eslint:recommended"
  ],
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {
    // 每行最大属性数量控制
    "vue/max-attributes-per-line": [
      2,
      {
        singleline: {
          max: 10,
          allowFirstLine: true,
        },
        multiline: {
          max: 1,
          allowFirstLine: false,
        },
      },
    ],
    // 关闭：强制自闭式标签
    "vue/html-self-closing": "off",
    // 关闭：属性顺序
    "vue/attributes-order": "off",
    // 关闭：属性强制执行特定大小写
    "vue/name-property-casing": "off",

    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    // 箭头函数的箭头前后需要空格
    "arrow-spacing": [
      "error",
      {
        before: true,
        after: true,
      },
    ],
    // 在打开块之后和关闭块之前加空格
    "block-spacing": ["error", "always"],
    // 大括号样式
    "brace-style": 0, // "brace-style": ["error", "1tbs", { allowSingleLine: true }],
    // 不要尾随逗号
    "comma-dangle": [2, "never"],
    // 逗号后面加空格
    "comma-spacing": ["error", { before: false, after: true }],
    // 在数组元素、对象属性或变量声明之后和同一行上需要一个逗号
    "comma-style": [2, "last"],
    // 强制缩进
    indent: ["error", 2, { SwitchCase: 1 }],
    // 关键字前后加空格
    "keyword-spacing": ["error", { after: true }],
    // 禁止不必要的括号
    "no-extra-parens": [2, "all"],
    // 禁止多个空格
    "no-multi-spaces": 2,
    // 禁止多个空行
    "no-multiple-empty-lines": [
      2,
      {
        max: 1,
      },
    ],
    // 禁止尾随空格
    "no-trailing-spaces": 2,
    // 禁止未定义的变量
    "no-unused-vars": [2, {
      vars: "all",
      args: "none"
    }],
    // 禁止没必要的计算属性
    "no-useless-computed-key": 2,
    // 禁止在使用属性前加空格
    "no-whitespace-before-property": 2,
    // 注释前需要有空格
    "spaced-comment": ["error", "always"],
    // 禁止在块内填充
    "padded-blocks": ["error", "never"],
    // 强制分号
    "semi": ["error", "never"],
    // 强制分号后使用空格
    // "semi-spacing": ["error", {"before": false, "after": true}],
    // 强制块前空间
    "space-before-blocks": ["error", "always"],
    // 强制函数括号前有空格
    "space-before-function-paren": ["error", "always"],
    // 强制括号内不要空格
    "space-in-parens": ["error", "never"],
    // 强制在运算符周围有空格
    "space-infix-ops": "error",
    // 强制一元单词运算符有空格
    "space-unary-ops": [
      "error",
      {
        words: true,
        nonwords: false,
      },
    ],
    // 比较NaN时 需要调用isNaN()
    "use-isnan": "error",
    // 大括号内强制保持一致的间距
    "object-curly-spacing": [
      "error",
      "always",
      {
        objectsInObjects: false,
      },
    ],
    // 数组括号间距
    "array-bracket-spacing": [2, "never"],
  },
};

.eslintignore 文件：

/public
build/*.js
node_modules/*

2.2 stylelint配置

官方文档：https://github.com/stylelint/stylelint/blob/5a8465770b4ec17bb1b47f359d1a17132a204a71/docs/user-guide/rules/list.md

// .stylelintrc.json
{
  "extends": "stylelint-config-standard",
  "rules": {
    "indentation": 2
  }
}

2.3 VSCode 配置保存自动修复错误

打开setting.json配置添加以下配置：

{
  "editor.tabSize": 2,
  // "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    //"source.fixAll": true  这个配置会把vscode安装的插件自带的格式化全部应用，建议按下面单个配置
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "eslint.run": "onSave", // 点击保存自动修复
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "eslint.validate": [
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact",
    "html",
    "vue"
  ],
  "javascript.validate.enable": false
}