接上篇：从0搭建vite-vue3-ts项目框架：配置less+svg+pinia+vant+axios
文档同步项目gitee：https://gitee.com/lixin_ajax/vue3-vite-ts-pinia-vant-less.git
一、Eslint：用于检测代码
安装eslint相关依赖
yarn add eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin -D
eslint-plugin-vue：仅支持vue，提供的规则可以支持 .vue\js\jsx\ts\tsx 文件校验
@typescript-eslint/parser：解析器，让ESLint拥有规范TypeScript代码的能力
@typescript-eslint/eslint-plugin：插件，包含一系列TypeScript的ESint规则
初始化eslint
npx eslint --init
选择项目eslint配置，回车确认，空格多选
√ How would you like to use ESLint? · style 你希望怎样使用eslint √ What type of modules does your project use? · esm 你的项目使用什么模块 √ Which framework does your project use? · vue 项目框架 √ Does your project use TypeScript? · No / Yes 是否使用typescript √ Where does your code run? · browser, node 代码运行在哪 √ How would you like to define a style for your project? · guide 项目样式 √ Which style guide do you want to follow? · standard-with-typescript 项目风格 √ What format do you want your config file to be in? · JavaScript 配置文件格式 √ Would you like to install them now? · No / Yes 确认是否安装 √ Which package manager do you want to use? · yarn 安装方式
安装完成，项目根目录生成.eslintrc.cjs文件
// .eslintrc.cjs module.exports = { env: { browser: true, es2021: true, node: true }, extends: [ 'plugin:vue/vue3-essential', 'standard-with-typescript' ], overrides: [ ], parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, plugins: [ 'vue' ], rules: { } }
在.eslintrc.cjs rules中配置eslint规则细节
rules配置eslint官网：https://eslint.org/docs/latest/rules/
腾讯云开发社区中文文档：https://cloud.tencent.com/developer/doc/1078
常用规则，参考：https://blog.csdn.net/ivenqin/article/details/104673237/
eslint-plugin-vue rules：https://eslint.vuejs.org/rules/
我的rules：
rules: {
"vue/no-v-html": "off",
"vue/script-setup-uses-vars": "off",
"@typescript-eslint/ban-ts-ignore": "off",
"@typescript-eslint/explicit-function-return-type": "off",
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/no-var-requires": "off",
"@typescript-eslint/no-empty-function": "off",
"vue/custom-event-name-casing": "off",
"no-use-before-define": "off",
"@typescript-eslint/no-use-before-define": "off",
"@typescript-eslint/ban-ts-comment": "off",
"@typescript-eslint/ban-types": "off",
"@typescript-eslint/no-non-null-assertion": "off",
"@typescript-eslint/explicit-module-boundary-types": "off",
"@typescript-eslint/no-unused-vars": [
"error",
{
argsIgnorePattern: "^_",
varsIgnorePattern: "^_",
},
],
"no-unused-vars": [
"error",
{
argsIgnorePattern: "^_",
varsIgnorePattern: "^_",
},
],
"space-before-function-paren": "off",
"vue/attributes-order": "off",
"vue/one-component-per-file": "off",
"vue/html-closing-bracket-newline": "off",
"vue/max-attributes-per-line": "off",
"vue/multiline-html-element-content-newline": "off",
"vue/singleline-html-element-content-newline": "off",
"vue/attribute-hyphenation": "off",
"vue/require-default-prop": "off",
"vue/require-explicit-emits": "off",
"vue/html-self-closing": [
"error",
{
html: {
void: "always",
normal: "never",
component: "always",
},
svg: "always",
math: "always",
},
],
"vue/multi-word-component-names": "off",
"vue/no-parsing-error": ["off"],
"eol-last": "off",
},
二、Prettier：用于格式化代码
安装prettier相关依赖
yarn add prettier eslint-config-prettier eslint-plugin-prettier stylelint-config-prettier -D
eslint-config-prettier：解决eslint和prettier冲突
eslint-config-prettier：将prettier作为eslint规则
stylelint-config-prettier：关闭所有不必要的或者有可能与Prettier冲突的规则
修改.eslintrc.cjs，配置prettier
extends: [
"plugin:prettier/recommended",
],
plugins: ["prettier"],
rules: {
"prettier/prettier": [
"error",
{
endOfLine: "auto",
},
],
}
修改package.json，配置修复项目格式命令
"scripts": {
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .ts --ext .d.ts --ext .vue src/"
},
或直接
"scripts": {
"lint-fix": "eslint . --fix"
},
执行命令，yarn lint-fix，项目按照eslint-prettier规则进行代码格式化
配置完成！
