vscode下vue3项目配置eslint+prettier

创建vue3项目时，配置eslint+prettier规范代码

记录一下自己在创建项目时配置一些代码规范的步骤

1. vscode安装插件

vscode安装ESLint和Prettier插件

2. 创建vue3项目

vue create vue3demo

// 进行选择
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 3.x // 选择vue版本为3.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

在创建项目的过程中，进行到Pick a linter / formatter config时，选择ESLint + Prettier。

3. 进行eslint配置

项目创建完之后的目录结构

先把.eslintrc.js删掉，然后执行eslint初始化的命令

npx eslint --init

// 根据项目情况进行选择
? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? None of these
? Which framework does your project use? Vue.js
? Does your project use TypeScript? Yes
? Where does your code run? Browser, Node
? How would you like to define a style for your project? Answer questions about your style
? What format do you want your config file to be in? JSON
? What style of indentation do you use? Tabs
? What quotes do you use for strings? Single    
? What line endings do you use? Unix
? Do you require semicolons? Yes


完成后会生成一个.eslintrc.json文件；

需要把生成的json文件里面的"plugin:vue/essential"改为"plugin:vue/vue3-essential"；

"plugin:@typescript-eslint/recommended"改为"plugin:@typescript-eslint/eslint-recommended"；

根据情况可以选择把rules里面的indent和linebreak-style部分注释掉

修改之后的.eslintrc.json文件

{
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/eslint-recommended"
    ],
    "parserOptions": {
        "ecmaVersion": 12,
        "parser": "@typescript-eslint/parser"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
        // "indent": [
        //     "error",
        //     "tab"
        // ],
        // "linebreak-style": [
        //     "error",
        //     "unix"
        // ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}

4. 安装prettier

pnpm install prettier eslint-config-prettier eslint-plugin-prettier -D

// 在上面生成的.eslintrc.json文件里面的extends最后添加

"plugin:prettier/recommended"

{
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:prettier/recommended" // 安装prettier后新增
    ],
    "parserOptions": {
        "ecmaVersion": 12,
        "parser": "@typescript-eslint/parser"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
        // "indent": [
        //     "error",
        //     "tab"
        // ],
        // "linebreak-style": [
        //     "error",
        //     "unix"
        // ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}

添加配置文件.prettierrc.js

// .prettierrc.js
// prettier还有很多可配置项，可以根据需要自行选择
module.exports = {
  printWidth: 80, // 每行代码长度（默认80）
  singleQuote: true, // 使用单引号（默认false）
  semi: true, // 声明结尾使用分号(默认true)
  bracketSpacing: true, // 对象字面量的大括号间使用空格（默认true）
  endOfLine: 'auto',
};

5. 执行npm run lint

上述步骤都完成后，执行npm run lint命令，把现有文件不符合规范的地方都修复一遍。