这是我参与「第五届青训营」伴学笔记创作活动的第 12 天

eslint+prettier和jest在webpack+ts+vue3在项目中的使用

1.安装eslint-webpack-plugin

npm install eslint-webpack-plugin --save-dev，这个作用相当于在webpack中加载eslint

webpack.dev.js这样配置

const ESLintPlugin = require("eslint-webpack-plugin");
plugins: [new ESLintPlugin({ extensions: ["ts", "js", "vue"] })],

2.初始化.eslintrc.js文件

npx exlinst --init,一路按照自己意愿来，然后按照下面初始化.eslintrc.js(init出来的文件有一点错误)

// eslint支持vue3
    parser: "vue-eslint-parser",
    parserOptions: {
        // eslint支持typescript
        parser: "@typescript-eslint/parser",
    },

3.eslint 常见命令

npx eslint . --ext .ts,.js,.vue 对.ts,.js,.vue文件进行校阅，同下

npx eslint . --ext --fix .ts,.js,.vue校阅并修复，所以我们一般会跟scripts一并使用

4.安装prettier

npm i prettier -D，并新建.prettierrc.js配置相关格式化

5.eslint和prettier有冲突怎么办

解决方法：npm i eslint-config-prettier eslint-plugin-prettier -D 然后将"plugin:prettier/recommended"放在最后(必须)。eslint不做任何格式化规则，只负责语法。

extends: [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended",
        "plugin:prettier/recommended",
    ],

6.jest在webpack+ts+vue3的使用

npm i @vue/test-utils@next jest vue-jest@next ts-jest @types/jest eslint-plugin-jest -D

jest.config.js的配置

module.exports = {
    collectCoverage: true,
    coverageDirectory: "dz",
    moduleFileExtensions: ["vue", "js", "ts"],
    preset: "ts-jest",
    testEnvironment: "jsdom",
    transform: {
        "^.+\\.vue$": "vue-jest", // vue 文件用 vue-jest 转换
        "^.+\\.ts$": "ts-jest", // ts 文件用 ts-jest 转换
    },
    // 测试匹配文件
    testRegex: ["tests/"],
};

可能会遇见的错误 As of Jest 28 "jest-environment-jsdom" is no longer shipped by default, make sure to install it separately. 直接npm i -D jest-environment-jsdom即可解决

最后：我发现用cnpm install打包和npm install下载有一点不同，npm install下载没有问题，而cnpm install下载有一点问题。

npm install下载会从package.json文件中读取模块名称，从package-lock.json文件中获取版本号。而cnpm install是不会从package-lock.json文件中获取版本号。它只会根据package.json下载。所以我们获取到它人的项目文件时，一定要npm install。如果你嫌速度慢，那么可以更换一下镜像地址 npm --registry=https://registry.npm.taobao.org i

组件库项目配置 | 青训营笔记