vue3+vite+ts+eslint+prettier踩坑日记

创建项目

执行以下命令创建项目，创建时选择vue 和 vue-ts

yarn create vite
复制代码

配置ESlint

创建完项目之后，本身并不支持ESlint，需要我们自己配置，首先安装eslint

yarn add eslint -D
复制代码

安装完之后我们需要配置eslint，一般情况下在项目根目录建一个eslintrc.js，或者用eslint指令进行初始化来创建,

初始化

eslint --init
复制代码

按照提示我们依次选择以下几个主要选项

? How would you like to use ESLint? ... 
  To check syntax only
  To check syntax and find problems
> To check syntax, find problems, and enforce code style
复制代码

? What type of modules does your project use? ... 
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these
复制代码

? Which framework does your project use? ... 
  React
> Vue.js
  None of these
复制代码

? Does your project use TypeScript? » No / Yes
复制代码

选择推荐风格，这里我们直接选第一个跟着引导去选择aribn或者standard

> Use a popular style guide
  Answer questions about your style
  Inspect your JavaScript file(s)
复制代码

选择完后，需要安装一些eslint相关的依赖包，默认是用npm安装，安装完会自动生成一个eslintrc.js

依赖包

个人感觉用npm比较慢，如果你想更快，可以取消，并且复制它推荐的那些依赖包，用yarn安装，但是这样一来将不会自动生成eslintrc.js文件，需要你自己去配置写一份eslintrc.js文件

yarn add eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest eslint-config-standard@latest eslint@^7.12.1 eslint-plugin-import@^2.22.1 eslint-plugin-node@^11.1.0 eslint-plugin-promise@^4.2.1 @typescript-eslint/parser@latest -D
复制代码

eslint-plugin-vue@latest 
@typescript-eslint/eslint-plugin@latest 
eslint-config-standard@latest 
eslint@^7.12.1 
eslint-plugin-import@^2.22.1 
eslint-plugin-node@^11.1.0 
eslint-plugin-promise@^4.2.1 
@typescript-eslint/parser@latest
复制代码

自动生成的 eslintrc.js

extends 的顺序后面会覆盖前面，prettier必须在最后，

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "plugin:vue/essential",
        "standard",
        "prettier"
    ],
    "parserOptions": {
        "ecmaVersion": 12,
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
    }
}
复制代码

到此为止我们的eslint安装完毕，下面我们需要让他支持vue 和 ts, 我们来继续修改eslintrc.js文件

我们的项目需要支持vue 和 ts，所以这里我们直接用官方推荐的插件和配置就行了，前面初始化eslint 选项的时候，就已经自动安装了相关依赖包 [eslint-plugin-vue] 和 @typescript-eslint/parser, 详情参考官方文档 (用户指南|eslint-plugin-vue (vuejs.org))

{
    parser: 'vue-eslint-parser',
    extends: [
      'plugin:vue/vue3-recommended',
      'plugin:@typescript-eslint/recommended',
      'standard'
   ]
}
复制代码

配置prettier

安装prettier

yarn add prettier -D
复制代码

解决 eslint 和 prettier 冲突

安装 eslint-config-prettier

解决 ESLint 中的样式规范和 prettier 中样式规范的冲突，以 prettier 的样式规范为准，使 ESLint 中的样式规范自动失效

eslint-plugin-prettier

eslint-plugin-prettier插件会调用prettier对你的代码风格进行检查，其原理是先使用prettier对你的代码进行格式化，然后与格式化之前的代码进行对比，如果过出现了不一致，这个地方就会被prettier进行标记。

接下来，我们需要在rules中添加，"prettier/prettier": "error"，表示被prettier标记的地方抛出错误信息。

//.eslintrc.js
{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

复制代码

项目下新建 .prettierrc.json 文件

module.exports = {
  tabWidth: 2,
  jsxSingleQuote: true,
  jsxBracketSameLine: true,
  printWidth: 100,
  singleQuote: true,
  semi: false,
  overrides: [
    {
      files: '*.json',
      options: {
        printWidth: 200,
      },
    },
  ],
  arrowParens: 'always',
}
复制代码

项目下新建 .prettierignore

# 忽略格式化文件 (根据项目需要自行添加)
node_modules
dist
复制代码

package.json 配置:

{
  "script": {
    "lint": "eslint src --fix --ext .ts,.tsx,.vue,.js,.jsx",
    "prettier": "prettier --write ."
  }
}
复制代码

上面配置完成后,可以运行以下命令测试下代码检查个格式化效果:

# eslint 检查
yarn lint
# prettier 自动格式化
yarn prettier
复制代码

prettier cli 指令 克莱 ·更漂亮的中文网 (prettier.cn)

格式化路径下文件

npx prettier -w .
复制代码

检查路径下文件是否格式化

npx prettier -c .
复制代码

常见问题 User Guide | eslint-plugin-vue (vuejs.org)

eslint parser冲突

eslint prettier冲突

参考文章

vscode + vite + vue3 + ts + eslint + stylelint 代码自动格式化 – 掘金 (juejin.cn)

用户指南|eslint-plugin-vue (vuejs.org)

prettier.cn

使用ESLint+Prettier来统一前端代码风格

未完待续…