代码检查 && 格式化

使用 ESLint + Prettier 实现代码检查和格式化

TIP

ESLint：主要用于代码检查，格式化使用 Prettier 替换默认方案

Prettier：结合 ESLint，实现代码格式化

VSCode 中安装插件

1. 插件中安装 ESLint、Prettier 官方提供的插件
2. 编辑器指定 Prettier 格式化配置：
   settings.json

   // 指定默认格式化
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   // 保存时自动格式化
   "editor.formatOnSave": true,
   // 指定文件格式化
   "[vue]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[scss]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },

项目中安装

pnpm

# prettier
pnpm i prettier -D

# eslint
pnpm i eslint -D

初始化 ESLint：

npx eslint --init

根据提示，会自动安装相关依赖以及生成配置文件：

自动生成的 eslint.config.js 配置如下：

import js from '@eslint/js'
import globals from 'globals'
import tseslint from 'typescript-eslint'
import pluginVue from 'eslint-plugin-vue'
import { defineConfig } from 'eslint/config'
import eslintConfigPrettier from 'eslint-config-prettier'

export default defineConfig([
  {
    files: ['**/*.{js,mjs,cjs,ts,mts,cts,vue}'],
    plugins: { js },
    extends: ['js/recommended'],
    languageOptions: { globals: globals.browser }
  },
  tseslint.configs.recommended,
  pluginVue.configs['flat/essential'],
  {
    files: ['**/*.vue'],
    languageOptions: { parserOptions: { parser: tseslint.parser } }
  }
])

ESLint 配置

忽略文件

新版本支持在 defineConfig 函数中直接定义 ignores：

//省略导入

export default defineConfig([
  // 省略前边的配置
  {
    ignores: [
      'node_modules',
      '*.md',
      'dist',
      '.vscode',
      '.idea',
      'public',
      '.gitignore'
    ]
  }
])

与 Prettier 格式化冲突

pnpm

pnpm install -D eslint-config-prettier

eslint.config.js 文件新增配置：

import js from '@eslint/js'
import globals from 'globals'
import tseslint from 'typescript-eslint'
import pluginVue from 'eslint-plugin-vue'
import { defineConfig } from 'eslint/config'
import eslintConfigPrettier from 'eslint-config-prettier'

export default defineConfig([
  // 省略前边的配置

  eslintConfigPrettier
])

添加脚本命令

在 package.json 中添加命令：

{
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts",
    "format": "prettier --write ."
  }
}