Vue3 + TS 我的项目中减少 ESLint 和 Prettier
背景
eslint 用于校验代码语法标准，保障我的项目品质；
prettier 用于保障我的项目代码的格局与格调；
Vue3 我的项目初始化
参考 搭建 Vite 我的项目
# npm 6.xnpm init vite@latest my-vue-app --template vue# npm 7+, 须要额定的双横线：npm init vite@latest my-vue-app -- --template vue# yarnyarn create vite my-vue-app --template vue# pnpmpnpm create vite my-vue-app -- --template vueESLint
装置
npm add eslint -D初始化
npx eslint --init初始化过程中的交互选项：
(1) How would you like to use ESLint?抉择：To check syntax and find problems(2) What type of modules does your project use?抉择：JavaScript modules (import/export)(3) Which framework does your project use?抉择：Vue.js(4) Does your project use TypeScript?抉择：Yes(5) Where does your code run?抉择：Browser(6) What format do you want your config file to be in?抉择：JavaScript(7) Would you like to install them now?抉择：Yes(8) Which package manager do you want to use?抉择：pnpm / npm / yarn依照这样抉择会主动装置辨认 vue 和 ts 文件所需的插件
初始化实现后会在我的项目根目录生成配置文件 .eslintrc.js
.eslintrc.js 配置
改写配置如下
module.exports = { env: { browser: true, es2021: true, node: true, }, extends: [ "eslint:recommended", "plugin:vue/vue3-essential", "plugin:@typescript-eslint/recommended", "prettier", ], parser: "vue-eslint-parser", parserOptions: { ecmaVersion: "latest", parser: "@typescript-eslint/parser", sourceType: "module", }, plugins: ["vue", "@typescript-eslint", "prettier"], rules: { "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", "@typescript-eslint/ban-types": "warn", "@typescript-eslint/no-explicit-any": "off", "vue/no-unused-vars": "warn", "vue/multi-word-component-names": "warn", },};script 配置
pakcage.json 中新增 script 如下
"scripts": { "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix", }eslint . 为指定lint以后我的项目中的文件
--ext 为指定lint哪些后缀的文件
--fix 开启主动修复
执行脚本即可应用 eslint 进行全局检查和修复
npm run lint装置 VSCode 插件 ESLint
实现每次保留代码时，主动执行lint命令来修复代码的谬误。
在我的项目中新建.vscode/settings.json文件，而后在其中退出以下配置。
{ // 开启主动修复 "editor.codeActionsOnSave": { "source.fixAll": false, "source.fixAll.eslint": true }}Prettier
装置
npm install prettier -D配置
在根目录下新建.prettierrc.js
module.exports = { // 一行的字符数，如果超过会进行换行，默认为 80 printWidth: 100, // 一个缩进应用几个空格数 tabWidth: 2, // 是否应用 tab 进行缩进，默认为 false，示意用空格进行缩减 useTabs: false, // 是否在句尾应用分号 semi: true, // 字符串是否强制应用单引号，默认为 false，应用双引号 singleQuote: false, // 是否应用尾逗号，有三个可选值"<none|es5|all>" trailingComma: "es5", // 对象大括号间接是否有空格，默认为 true，成果：{ foo: bar } bracketSpacing: true, // 解决换行符 lf,crlf,cr,auto endOfLine: "auto", // Object 对象中的引号解决形式 quoteProps: "consistent",};具体配置见 官网文档
script 配置
pakcage.json 中新增 script 如下
"scripts": { "format": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\"", }装置 VSCode 插件 Prettier - Code formatter
装置该插件以实现在保留的时候主动实现格式化
在 .vscode/settings.json 中增加一下规定
{ // 保留的时候主动格式化 "editor.formatOnSave": true, // 默认格式化工具抉择prettier "editor.defaultFormatter": "esbenp.prettier-vscode"}TODO:
ESLint 和 Prettier 的抵触问题
参考
- Prettier 配置
- ESLint 配置
- Typescript ESLint 配置
- eslint-plugin-vue 配置
- vue3+ts+vite我的项目中应用ESLint+prettier+stylelint+husky指南