安装 ESLint 和 Prettier 来自动检测代码 和 自动格式化

【VUE3】Eslint 与 Prettier 的配置
VSCode 插件 Prettier 安装、配置与使用指南

一. 创建vue项目

// 1. 创建 vue 项目
npm create vue
// 2. 安装依赖并生成 package.json文件
npm install

二. 安装 Eslint 与 Prettier 插件

1. 通过vue手脚架安装Eslint 与 Prettier 插件.
参考 【VUE3】Eslint 与 Prettier 的配置

2. 手动安装

ESLint

官网: https://eslint.org/docs/latest/use/getting-started

npm init @eslint/config@latest

注意: Would you like to install them now? 要选 Yes

安装成功后,在package.json文件夹下会生成 eslint.config.js 文件.

// eslint.config.js

import { defineConfig } from "eslint/config";
import js from "@eslint/js";

export default defineConfig([
    {
        files: ["**/*.js"],
        plugins: {
            js,
        },
        extends: ["js/recommended"],
        rules: {  // 这里配置规则
            "no-unused-vars": "warn",
            "no-undef": "warn",
        },
    },
]);

编写函数验证, 查看是否有函数校验生效:

0b86771d-f14e-449f-889e-6eff00c2beb3.png

Prettier

官网: https://prettier.io/docs/install

// 安装 prettier
npm install --save-dev --save-exact prettier

// 使用 eslint-plugin-prettier 中的推荐规则集
// 使用 eslint-config-prettier 禁用 ESLint 中与 Prettier 冲突的规则
npm add --save-dev eslint-plugin-prettier eslint-config-prettier

1. 在根目录手动创建 .prettierrc.json 文件并配置规则:

//  .prettierrc.json

{
  "printWidth": 100,  // 一行最多 100 字符
  "tabWidth": 2,      // 使用 2 个空格缩进
  "useTabs": false,  // 不使用缩进符，而使用空格
  "semi": false,        // 不尾随分号
  "singleQuote": true,  // 使用单引号
  "trailingComma": "none",   // 多行逗号分割的语法中，最后一行不加逗号
  "arrowParens": "avoid",    // 单个参数的箭头函数不加括号 x => x
  "bracketSpacing": true,    // 对象大括号内两边是否加空格 { a:0 }
  "htmlWhitespaceSensitivity": "ignore"   //去除多余空行的设置
}

2. 在项目根目录下配置 .vscode/settings.json，确保团队成员使用统一的格式化规则：

...
 "editor.defaultFormatter": "esbenp.prettier-vscode", // 设置默认格式化工具
  "editor.formatOnSave": true, // 保存时自动格式化
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit", // 保存时自动修复 ESLint 问题
    "source.organizeImports": "explicit" // 保存时自动整理导入语句
  },
  "prettier.configPath": ".prettierrc.json", // 指定 Prettier 配置文件路径
  "[javascript]": {
    // 仅对特定语言启用 Prettier
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    // 仅对特定语言启用 Prettier
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

3. 在 eslint.config.js 中配置推荐规则集 和 忽略文件

// eslint.config.js

import js from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'
import globals from 'globals'
import tseslint from 'typescript-eslint'

// 修改 1 引入
import { defineConfig, globalIgnores } from 'eslint/config'
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'


export default defineConfig([
  {
    files: ['**/*.{js,mjs,cjs,ts,mts,cts,vue}'],
    plugins: { js },
    extends: ['js/recommended'],
    languageOptions: { globals: globals.browser }
  },
  // 修改 2:忽略文件
  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
  tseslint.configs.recommended,
  pluginVue.configs['flat/essential'],
  { files: ['**/*.vue'], languageOptions: { parserOptions: { parser: tseslint.parser } } },
  // 修改 3 使用
  eslintPluginPrettierRecommended,
  {
    //配置规则
    rules: {   
      // 'no-unused-vars': 'warn',
      // 'no-undef': 'warn'
    }
  }
])

4. 修改eslint.config.js 无法立即生效, 需要VSCode重启.

5. 测试:
   command + s 代码会自动格式化.
   代码中会有格式校验生效

3b28e26d-6869-43f8-ba33-f89dcea0cc12.png