202409使用eslint与prettier的实战

vue-format

node.js v20.0.0、pnpm v9.5.0

初始化项目

  pnpm create vue@latest

参考自 vue 官网

eslint 的安装并配置

  npm init @eslint/config@latest

参考自 eslint 官网

• 选项参考

  √ How would you like to use ESLint? · problems
  √ What type of modules does your project use? · esm
  √ Which framework does your project use? · vue
  √ Does your project use TypeScript? · typescript
  √ Where does your code run? · browser

• 依赖变化

# package.json > devDependencies
+ @eslint/js 9.11.1
+ globals 15.9.0
+ typescript-eslint 8.7.0

安装eslint的vscode的插件

打开vscode的扩展，快捷键为 Ctrl + Shift +X，搜eslint，选择并安装ESLint (v3.0.10)，已安装的可跳过该步骤。

检查eslint是否工作正常

• 在eslint.config.js文件中，新增如下规则

export default = [
   ...,
   {files: ["**/*.vue"], languageOptions: {parserOptions: {parser: tseslint.parser}}},

+  {
+    rules: {
+     'no-console': 'error' // 禁止使用console
+    }
+  }
]

• 在任意js文件中测试，查看是否会飘红

  console.log(111)

• 截止目前的package.json文件

{
  "name": "vue-format",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --build --force",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "pinia": "^2.1.7",
    "vue": "^3.4.29",
    "vue-router": "^4.3.3"
  },
  "devDependencies": {
    "@eslint/js": "^9.11.1",
    "@rushstack/eslint-patch": "^1.8.0",
    "@tsconfig/node20": "^20.1.4",
    "@types/node": "^20.14.5",
    "@vitejs/plugin-vue": "^5.0.5",
    "@vue/eslint-config-prettier": "^9.0.0",
    "@vue/eslint-config-typescript": "^13.0.0",
    "@vue/tsconfig": "^0.5.1",
    "eslint": "^8.57.1",
    "eslint-plugin-vue": "^9.28.0",
    "globals": "^15.9.0",
    "npm-run-all2": "^6.2.0",
    "prettier": "^3.2.5",
    "typescript": "~5.4.0",
    "typescript-eslint": "^8.7.0",
    "vite": "^5.3.1",
    "vue-tsc": "^2.0.21"
  }
}

prettier 的安装与配置

在使用 pnpm create vue@latest 初始化项目的时候，如果 是否引入 Prettier 用于代码格式化 已经选择了 是。那么就已经安装好了 Prettier，无需再安装了。

如果你之前选择的是 否，可以通过如下命令进行安装：

  pnpm i prettier @vue/eslint-config-prettier

其版本与附属依赖版本，参考如下：

{
  "@vue/eslint-config-prettier": "^9.0.0",
   "prettier": "^3.2.5",
}

检查prettier是否工作正常

• 在eslint.config.js文件中，新增配置如下：

import pluginVue from "eslint-plugin-vue";
+ import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'

export default = [
   ...,

  {
    rules: {
     'no-console': 'error' // 禁止使用console
    }
  },

+   /**
+   * prettier 配置
+   * 会合并根目录下的prettier.config.js 文件
+   * @see https://prettier.io/docs/en/options
+   */
+  eslintPluginPrettierRecommended,
]

添加之后，就会发现文件立即就飘红了，比如 Replace "globals"; with 'globals'，建议使用单引号的提示。

此时，你Ctrl + S 进行保存的时候，代码会被自动修复。

其原因是设置了保存代码时自动修复，如果你的代码没自动修改，可以检查下 .vscode > settings.json的文件配置，参考如下：

{
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

其实现格式化，是根据 prettier 的文件配置进行的。如：.prettierrc.json，详细配置可参考 prettier官网 的 options 配置。

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false, // 是否在语句末尾加分号(默认true)
  "tabWidth": 2, // 指定缩进的空格数(默认2)
  "singleQuote": true, // 是否使用单引号(默认false)
  "printWidth": 100, // 每行字符换行的阈值(默认80)
  "trailingComma": "none"
}