记一次vscode,vite,vue,ts,eslint,prettier集成

JZzz
221 阅读4分钟

最近在搭建前端项目时，在继承ts,eslint和prettier时，总会忘了一些包和步骤。现在做一次记录。下面打包工具使用vite。

vite 创建vue项目

vite官方提供了一些项目模板，关于vue的模板有vue和vue-ts。借助其脚手架可以快速搭建vue项目，如想搭建一个使用ts和vue3项目，可以使用下面脚本中的一种

# npm 6.x 
npm create vite@latest my-vue-app --template vue-ts

# npm 7+, extra double-dash is needed: 
npm create vite@latest my-vue-app -- --template vue-ts

# yarn
yarn create vite my-vue-app --template vue-ts

# pnpm
pnpm create vite my-vue-app --template vue-ts

vite前提条件

Vite 需要 Node.js 版本 14.18+，16+。

引入eslint

接下来我们引入eslint，执行下面代码

yarn add -D eslint

通过eslint命令生成eslint配置文件

在项目中执行npx eslint --init,eslint会通过提示来帮我们生成所需要的配置文件，如

  1. 引入eslint的主要目的 image.png

  2. 想要使用的模块 image.png

  3. 想支持的框架 image.png

  4. 是否使用TS image.png

  5. 通过什么容器跑代码 image.png

  6. 通过什么语言来写配置文件 image.png

  7. 通过我们的选择，eslint会告诉我们需要使用到的包和插件，询问是否下载，如

image.png 其中

  • eslint-plugin-vue\@latest

让我们可以在vue里面使用eslint

  • @typescript-eslint/eslint-plugin@latest

为ts提供一些eslint规则

  • @typescript-eslint/parser@latest

将ts转化为eslint能够理解的语法结构

  1. 最后选择下载以及下载工具，则可安装对应的包和生成所需要的配置文件，如

image.png

生成的.eslint.cjs内容如下

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended"
    ],
    "overrides": [
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

自动生成的eslint配置文件注意事项

现在生成的eslint文件中，只配置了解析ts文件，如

image.png

若想使其能解析.vue文件，我们需要修改下解析器

"parser": "vue-eslint-parser", //它是在 ESLint 插件 `eslint-plugin-vue` 中使用的一个依赖项
"parserOptions": {
 ...其他配置
  "parser": "@typescript-eslint/parser",
}

此时eslint就可以正确解析到vue文件了，如

image.png

可见此时控制台并没报错

安装prettier

prettier也是一种代码格式化工具，将这个和eslint，以及vscode的eslint和prettier插件一起使用，可以让我们在vscode编写代码且保存时自动格式化代码。安装命令如下，安装时可以指定版本

npm install --save-dev --save-exact prettier@^2.7.1

解决prettier和eslint规则冲突

由于prettier和eslint都有自己的一些规则，我们需要一些包来处理规则中的冲突，如 eslint-config-prettier和eslint-plugin-prettier。其中

  • eslint-config-prettier 的作用是禁用 ESLint 中与 Prettier 冲突的规则，以确保两者之间的一致性。
  • eslint-plugin-prettier 将 Prettier 应用于代码，并在需要时进行自动修复，确保代码符合 Prettier 的格式要求。

下载完这两个包后，我们需要在eslint配置文件中将其加入，我们可以通过继承一些包来实现。如在extends的末尾添加配置plugin:prettier/recommended，其是 eslint-plugin-prettier 包提供的一个预设配置。预设配置是一组已经定义好的规则和插件配置的集合，可以一次性引入，而无需逐个配置每个规则。如在.eslintrc文件中

"extends": [
    ...其他内容, 
    "plugin:prettier/recommended"
],

下载vscode插件并配置vscode

做完上面内容，我们还需要在vscode的拓展中下载插件

image.png

image.png

.eslintrc完整实例

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended",
        "plugin:prettier/recommended"
    ],
    "overrides": [
    ],
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

在开发时显示错误提示

vite-plugin-eslint包可以让语法错误在开发时期显示到页面上（该动作可加可不加），配置步骤如下

  1. 下载vite-plugin-eslint yarn add -D vite-plugin-eslint
  2. 在vite.config.js中配置
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import eslintPlugin from "vite-plugin-eslint";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    eslintPlugin({
      include: [
        "src/**/*.ts",
        "src/**/*.js",
        "src/**/*.vue",
        "src/*.ts",
        "src/*.js",
        "src/*.vue",
      ],
    }),
  ],
});

配置vscode保存时自动格式化代码

  1. 创建.vscode文件夹放置在项目根目录上
  2. 创建settings.json文件，输入以下内容
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

配置文件别名

需要分别在vite和ts中设置别名，具体配置如下

  1. tsconfig.json
{
 "compilerOptions": {
   ...其他配置
   "paths": {
      "@/*": ["./src/*"]
    },
  }
}
  1. vite.config.ts
export default defineConfig({
  ...其他配置
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
}）

未完待续

通过上面步骤我们可以搭建通过vite脚手架配合vscode，集成eslint和prettier的过程，但还是有一些细节可以补充，比如perttier的配置写在单独的.prettier文件中比较好还是写在.eslintrc的rules中，为什么直接继承"plugin:prettier/recommended"就可以引入规则和解决prettier和eslint冲突等。等我有空再继续补充。

avatar
文章
阅读
粉丝