简介

记录一下，搭建博客项目，配置Eslint和prettier的过程，想通过配置达到两个目的，第一个是校验约定规则，第二个是按保存的时候自动格式化，省时省力。有需要的JYM可以参考一下

创建Vue3.2项目

一、环境要求

node >= 16 // 实测12.22.12中初始化会报错

打开命令行输入以下指令

npm init vue@latest

这一指令将会安装并执行create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

而我个人选择的搭配方式是：Typescript+JSX+VueRouter+Pinia+ESlint+Prettier

二、设置VSCode

安装vscode插件

配置当前项目.vscode

extensions.json

{
  "recommendations": ["dbaeumer.vscode-eslint"]
}

settings.json 设置ctrl + s保存自动按照prettier格式化

{
  "editor.codeActionsOnSave": {
      "source.fixAll": true,
  },
  "eslint.validate": [
      "javascript",
      "javascriptreact",
      "typescript",
      "typescriptreact",
  ],
  "eslint.alwaysShowStatus": true,
  "editor.formatOnSave": true
}
 

三、安装插件

安装 vite-plugin-eslint

说明: 该包是用于配置vite运行的时候自动检测eslint规范
问题: 不装这个包可以吗? 答案是“可以的”,使用npm run dev时并不会主动检查代码

npm i vite-plugin-eslint --save-dev

配置.eslintrc.js

0、ESLint配置文档

module.exports = {
    "extends": [
        "plugin:@typescript-eslint/recommended",
        "eslint-config-airbnb-base",
        "@vue/typescript/recommended",
        "plugin:vue/vue3-recommended",
        "plugin:vue-scoped-css/base",
        "plugin:prettier/recommended"
    ],
    "env": {
        "browser": true,
        "node": true,
        "jest": true,
        "es6": true
    },
    "globals": {
        "defineProps": "readonly",
        "defineEmits": "readonly"
    },
    "plugins": ["vue", "@typescript-eslint"],
    "parserOptions": {
        "parser": "@typescript-eslint/parser",
        "sourceType": "module",
        "allowImportExportEverywhere": true,
        "ecmaFeatures": {
        "jsx": true
        }
    },
    "settings": {
        "import/extensions": [".js", ".jsx", ".ts", ".tsx"]
    },
    "rules": {
        "no-console": "off",
        "no-continue": "off",
        "no-restricted-syntax": "off",
        "no-plusplus": "off",
        "no-param-reassign": "off",
        "no-shadow": "off",
        "guard-for-in": "off",
        "prettier/prettier": "off", // 解决replace with


        "import/extensions": "off",
        "import/no-unresolved": "off",
        "import/no-extraneous-dependencies": "off",
        "import/prefer-default-export": "off",
        "import/first": "off", // https://github.com/vuejs/vue-eslint-parser/issues/58
        "@typescript-eslint/no-explicit-any": "off",
        "@typescript-eslint/explicit-module-boundary-types": "off",
        "vue/first-attribute-linebreak": 0,

        "@typescript-eslint/no-unused-vars": [
        "error",
        {
            "argsIgnorePattern": "^_",
            "varsIgnorePattern": "^_"
        }
        ],
        "no-unused-vars": [
        "error",
        {
            "argsIgnorePattern": "^_",
            "varsIgnorePattern": "^_"
        }
        ],
        "no-use-before-define": "off",
        "@typescript-eslint/no-use-before-define": "off",
        "@typescript-eslint/ban-ts-comment": "off",
        "@typescript-eslint/ban-types": "off",
        "class-methods-use-this": "off" // 因为AxiosCancel必须实例化而能静态化所以加的规则，如果有办法解决可以取消
    },
    "overrides": [
        {
        "files": ["*.vue"],
        "rules": {
            "vue/component-name-in-template-casing": [2, "kebab-case"],
            "vue/require-default-prop": 0,
            "vue/multi-word-component-names": 0,
            "vue/no-reserved-props": 0,
            "vue/no-v-html": 0,
            "vue-scoped-css/enforce-style-type": ["error", { "allows": ["scoped"] }]
        }
        },
        {
        "files": ["*.ts", "*.tsx"], // https://github.com/typescript-eslint eslint-recommended
        "rules": {
            "constructor-super": "off", // ts(2335) & ts(2377)
            "getter-return": "off", // ts(2378)
            "no-const-assign": "off", // ts(2588)
            "no-dupe-args": "off", // ts(2300)
            "no-dupe-class-members": "off", // ts(2393) & ts(2300)
            "no-dupe-keys": "off", // ts(1117)
            "no-func-assign": "off", // ts(2539)
            "no-import-assign": "off", // ts(2539) & ts(2540)
            "no-new-symbol": "off", // ts(2588)
            "no-obj-calls": "off", // ts(2349)
            "no-redeclare": "off", // ts(2451)
            "no-setter-return": "off", // ts(2408)
            "no-this-before-super": "off", // ts(2376)
            "no-undef": "off", // ts(2304)
            "no-unreachable": "off", // ts(7027)
            "no-unsafe-negation": "off", // ts(2365) & ts(2360) & ts(2358)
            "no-var": "error", // ts transpiles let/const to var, so no need for vars any more
            "prefer-const": "error", // ts provides better types with const
            "prefer-rest-params": "error", // ts provides better types with rest args over arguments
            "prefer-spread": "error", // ts transpiles spread to apply, so no need for manual apply
            "valid-typeof": "off" // ts(2367)
        }
        }
    ]
}

上面代码中，所需要到的

"plugin:@typescript-eslint/recommended",
"eslint-config-airbnb-base",
"@vue/typescript/recommended",
"plugin:vue/vue3-recommended",
"plugin:vue-scoped-css/base",
"plugin:prettier/recommended"

需要依次安装下

1、eslint-config-airbnb-base

npm install eslint-config-airbnb-base --save-dev

可以实现代码驼峰转换 <documentationIcon />转换为<documentation-icon />

2、eslint-plugin-vue-scoped-css

npm install eslint-plugin-vue-scoped-css --save-dev

遇到Bug

解决方法:

1. 在.eslintrc.js 文件中的rules中添加 “prettier/prettier”: “off”

2. 重启vscod 再重启项目就解决了

ESLint 和 Prettier 配合使用

prettier官方提供了一款工具 eslint-config-prettier 来解决这个问题。

本质上这个工具其实就是禁用掉了一些不必要的以及和Prettier相冲突的ESLint规则。

安装依赖：

npm install --save-dev eslint-config-prettier

修改 eslintrc 文件

// 在 extends 部分加入 prettier 即可
{
  "extends": [
    "...",
    "prettier"
  ]
}

整合使用 上面介绍的工具，仅仅只是将部分 ESLint 规则给禁用了，避免 Prettier 格式化之后的代码导致 ESLint 报错而已，如何将两者结合起来使用呢？

prettier 官方提供了一个 ESLint 插件 eslint-plugin-prettier。

这个插件的主要作用就是将 prettier 作为 ESLint 的规则来使用，相当于代码不符合 Prettier 的标准时，会报一个 ESLint 错误，同时也可以通过 eslint --fix 来进行格式化。

例如：

这样就相当于将 Prettier 整合进了 ESLint 中。

安装依赖：

npm install --save-dev eslint-plugin-prettier
npm install --save-dev prettier

修改 eslintrc 文件

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

重点贴码

其实可以简化一下，直接 extend 一下 plugin:prettier/recommended 即可。

如下：

{
  "extends": ["plugin:prettier/recommended"]
}

上面这行配置，实际上相当于：

{
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off"
  }
}

补充内容

如果需要在其他开发工具上也保持一致的代码格式，推荐设置 .editorconfig

# 表示是最顶层的配置文件，发现值为true时，才会停止查找.editorconfig文件
root = true
[*]
# 设置使用那种缩进风格(tab是制表符，space是空格)
indent_style = space

# 设置换行符，值为lf、cr和crlf
end_of_line = auto
charset = utf-8
# 设置为true则删除换行符之前的任何空白字符
# 设置为true会删除每一行后的任何空格  ***
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[*.{ts,js,vue,css}]
indent_size = 2