vue使用eslint和代码自动格式化

本文旨在介绍Vue项目中进行代码校验和代码格式化等相关内容。将分为三个部分来实现，包括 全新的Vue3项目，已经有点Vue3项目，以及留存的Vue2版本的项目。

1. 全新Vue3项目（一键自动生成就是爽）

1. 初始化项目

2. 引入 eslint 和 prettier 来做代码检验和格式化。按照下图中进行操作。 project-init.png

3. 查看相关（自动格式化）

// 格式化之前
import HelloWorld from './components/HelloWorld.vue';
const List = [{name: 'tome',age: 18,},];
const data = [{ 
  name: 'tome',
  age: 18 }]

// 格式化之后
/**
* 仅需 ctrl + s 进行保存一下，即可实现代码自动格式化。
* 自动去掉了行位的 逗号 和 分号， 自动添加了 空格。
* 自动更改缩进，自动配置格式。
*/
import HelloWorld from './components/HelloWorld.vue'
const List = [{ name: 'tome', age: 18 }]
const data = [
  {
    name: 'tome',
    age: 18
  }
]

4. 初始化后package.json文件内容如下

   {
     "name": "vue3-ts-codeformat-demo",
     "version": "0.0.0",
     "private": true,
     "type": "module",
     "scripts": {
       "dev": "vite",
       "build": "run-p type-check \"build-only {@}\" --",
       "preview": "vite preview",
       "test:unit": "vitest",
       "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": {
       "@rushstack/eslint-patch": "^1.8.0",
       "@tsconfig/node20": "^20.1.4",
       "@types/jsdom": "^21.1.7",
       "@types/node": "^20.14.5",
       "@vitejs/plugin-vue": "^5.0.5",
       "@vitejs/plugin-vue-jsx": "^4.0.0",
       "@vue/eslint-config-prettier": "^9.0.0",
       "@vue/eslint-config-typescript": "^13.0.0",
       "@vue/test-utils": "^2.4.6",
       "@vue/tsconfig": "^0.5.1",
       "eslint": "^8.57.0",
       "eslint-plugin-vue": "^9.23.0",
       "jsdom": "^24.1.0",
       "npm-run-all2": "^6.2.0",
       "prettier": "^3.2.5",
       "typescript": "~5.4.0",
       "vite": "^5.3.1",
       "vitest": "^1.6.0",
       "vue-tsc": "^2.0.21"
     }
   }
   

4. 其他配置

2. 现有Vue3项目

1. 安装Eslint

# 安装eslint 当前 node@18.20.4
yarn add eslint -D
# 安装版本为 eslint: 9.x

# 初始化 eslint 配置
yarn eslint --init
# init方法参考下图

init step.png

图中内容安装完成后在根目录会自动生成eslint.config.mjs配置文件。具体内容如下

import globals from "globals";
import pluginJs from "@eslint/js";
import pluginVue from "eslint-plugin-vue";


export default [
  {files: ["**/*.{js,mjs,cjs,vue}"]},
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended,
  ...pluginVue.configs["flat/essential"],
];

至此，eslint相关的配置完成了。

2. 安装Prettier

   # 安装 Prettier
   yarn add prettier -D
   # 安装版本 "prettier": "^3.3.3"
   

   安装完成后手动在根目录创建prettier.json 或者 prettier.config.cjs文件，作为配置内容。

   如果使用json配置不生效有可能是版本问题，可以尝试 prettier.config.cjs 的方式。两种方式本人都亲测成功！

   # prettier.json 文件内容。如果使用json配置不生效有可能是版本问题，可以尝试 prettier.config.cjs 的方式。
   {
     "printWidth": 100,
     "tabWidth": 2,
     "useTabs": true,
     "semi": false,
     "singleQuote": true,
     "trailingComma": "none",
     "bracketSpacing": true,
     "bracketSameLine": true,
     "arrowParens": "always",
     "htmlWhitespaceSensitivity": "ignore",
     "vueIndentScriptAndStyle": false,
     "endOfLine": "auto",
     "singleAttributePerLine": false
   }
   

   更多常用配置参数用js格式在这里注释一下

   // prettier.config.cjs
   module.exports = {
     // 一行最多 100 字符
     printWidth: 100,
     // 使用 2 个空格缩进
     tabWidth: 2,
     // 不使用缩进符，而使用空格
     useTabs: false,
     // 行尾需要有分号
     semi: false,
     // 使用单引号
     singleQuote: true,
     // 对象的 key 仅在必要时用引号
     quoteProps: 'as-needed',
     // jsx 不使用单引号，而使用双引号
     jsxSingleQuote: false,
     // 末尾不需要逗号
     trailingComma: 'none',
     // 大括号内的首尾需要空格
     bracketSpacing: true,
     // jsx 标签的反尖括号需要换行
     jsxBracketSameLine: false,
     // 箭头函数，只有一个参数的时候，也需要括号
     arrowParens: 'always',
     // 每个文件格式化的范围是文件的全部内容
     rangeStart: 0,
     rangeEnd: Infinity,
     // 不需要写文件开头的 @prettier
     requirePragma: false,
     // 不需要自动在文件开头插入 @prettier
     insertPragma: false,
     // 使用默认的折行标准
     proseWrap: 'preserve',
     // 根据显示样式决定 html 要不要折行
     htmlWhitespaceSensitivity: 'css',
     // 换行符使用 lf
     endOfLine: 'lf'
   }
   

3. 编译器 Vscode的配置

   1. 打开 vscode 编辑器的配置文件, 在 vscode 主界面快捷键 ctrl+shift+p , 弹窗里的 首选项: Open WorkSpace Settings(JSON)。然后就能在项目目录中看到 .vscode 的文件目录

   2. 在 .vscode/settings.json 文件中写入下面配置代码

      # settings.json 文件内容
      {
        "editor.codeActionsOnSave": {
          "source.fixAll.eslint": "explicit"
        },
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.tabSize": 2
      }
      
      

4. 其他配置

   • Prettier格式化报错。请重启Vscode编辑器可解决至少一下两个问题

     Invalid host defined options
     
     TypeError: A dynamic import callback was not specified.
     

   • 配置eslint的ignore文件

     # 根目录手动创建 .eslintignore
     dist
     node_modules
     

• 配置prettier的ignore文件

  # 根目录下新建 .prettierignore 文件并填入如下代码：
  /dist/*
  /html/*
  .local
  /node_modules/**
  **/*.svg
  **/*.sh
  /public/*
  
  

• 其他信息

3. 留存Vue2项目

经过亲测，与 Vue3项目一致，这里不再赘述。