创建项目

话不多说移步下官方文档

安装vscode插件

vscode安装eslint插件和prettier，这个也不用多说

配置vite的eslint插件

import eslintPlugin from 'vite-plugin-eslint'; // 引入

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), eslintPlugin()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});

配置.estlintrc.js文件

module.exports = {
  root: true,
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/eslint-config-typescript",
    "@vue/eslint-config-prettier/skip-formatting",
    "plugin:prettier/recommended",
  ],
  env: {
    node: true,
  },
  plugins: ["vue", "@typescript-eslint"],
  rules: {
    semi: [2, "always"],
    // quotes: [2, "double"]
  },
};
```重点这个plugin:prettier/recommended

配置.prettierrc.json

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": true
}

注意这个里的semi属性先随便定义下，跟eslint的对应下，为啥的话我们看后面的操作。

配置下工作区的setting.json

{
    // "editor.codeActionsOnSave": {
    //     "source.fixAll.eslint": true
    // }
    "editor.formatOnSave": true, //  保存的时候美化格式
    "editor.defaultFormatter": "esbenp.prettier-vscode", // 默认格式化工具为 prettier
    "prettier.requireConfig": true,
    "eslint.workingDirectories": [{ "mode": "auto" }],
    "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "vue"]
}
上面前两个属性需要配置一下，其它的随意

使用

以上便是一般情况下的配置，但是在ide中可以发现

应该是plugin:prettier/recommended导致的，我们保存也是无法自动修复的。 然后我们在.prettierrc.json加上格式化规则

可以发现自动格式化了双引号,但是又有一个lint的报错，发现是自动加上了逗号，我们手动删掉，保存又会重新加上。想下应该是prettier的问题，因为我们加上了plugin:prettier/recommended，我们试着改下eslint的rules和.prettierrc.json

再看配置文件的报错保存后都自动修复了

结语

通过实践过程中的几个小错误，到这里基本能了解和体会到eslint和prettier是需要互相配合把我们的语法规则和代码格式做到标准化的，对于开发中需要开启lint的伙伴们来说还是能提高不少工作效率的。