Eslint +Vue配置

1,安装eslint

执行命令npx eslint --init

完成之后会在项目根目录生成.eslint.js文件

// eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "@vue/prettier",
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "airbnb-base",
  ],
  parserOptions: {
    ecmaVersion: "latest",
    parser: "@typescript-eslint/parser",
    sourceType: "module",
  },
  plugins: ["vue", "@typescript-eslint"],
  rules: {
    quotes: [1, "double"], // 强制使用双引号
    semi: 1, // 末尾分号警告
    indent: "off", // 关闭eslint缩进警告
    "max-len": ["error", { code: 120 }], // 每行最大长度120字符
    "no-console": 0, // 关闭console报错
    "space-before-function-paren": ["error", "never"], // 禁止函数名前后有空格
    "keyword-spacing": ["error", { before: true, after: true }], // 关键字后面是否要空一格
    "no-debugger": 2, // 禁止使用debugger
    "comma-dangle": "off",
  },
  globals: {
    // 全局变量忽略检测
    configUrl: "readonly",
  },
};

2, 设置保存时自动修复

此时,执行 eslint index.js --fix可以修复已存在 的eslint语法错误

但是每次执行这个命令会很麻烦,所以可以通过修改vscode的配置项,保存时就进行修复

需要用到eslint的vscode插件

将以下配置加入settings.json

    "editor.formatOnType": true,
    "editor.formatOnSave": true,
    "eslint.codeAction.showDocumentation": {
        "enable": true
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ]

此时 ctrl+s 保存代码时就能修复eslint部分错误

3,安装prettier进行代码风格优化

执行npm i prettier -D命令安装prettier

安装完之后 执行npx prettier --write +对应文件 即可进行代码风格格式化,凌乱的代码会变得工整

创建.prettier.js文件

// .prettier.js
module.exports = {
    semi: false,// 格式化不加分号
    singleQuote: false, // 格式化以单引号为主
    useTabs: false
}

4,保存时自动进行风格优化

需要用到prettier的vscode插件

设置自动保存

将以下配置加入settings.json(同上一步)

//setting.json文件
     "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascriptreact]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },

eslint和prettier的默认格式化规则有冲突

执行命令npm i eslint @vue/eslint-config-prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue prettier -D

解决eslint和prettier的冲突问题

5,添加.eslintignore文件忽略校验(可根据需要自行添加)

// .eslintignore
/public
/src/utils
/dist

6,设置缩进以及行尾序列

根目录下新建文件.editorconfig

root = true
 
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = false
trim_trailing_whitespace = false

7,主动修复

按照上述流程设置完成之后,重启一下vscode

ctrl+s即可实现代码风格统一+代码基础错误修复

目前只实现了基础的一版,像变量或者方法未使用等错误类型还需手动修复 不过eslint都会进行提示

部分错误可以通过快捷修复的方式进行修复