一、安装依赖
pnpm install
eslint //eslint核心代码库
eslint-plugin-vue //eslint在vue里的代码规范
eslint-config-prettier //eslint结合prettier的格式化
prettier //prettier格式化代码核心库
eslint-plugin-import //项目里面支持eslint
eslint-plugin-prettier //将prettier结合进入eslint的插件
eslint-config-airbnb-base //aibbnb的代码规范（依赖plugin-import）
-D
二、安装vscode插件
eslint、prettier
三、初始化init
在package.json的script中，添加命令
"lint:create": "eslint --init"
根据提示完成初始化，生产.eslintrc.cjs文件
四、安装依赖
npm install typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-import-resolver-alias @types/eslint @types/node -D
在package.json中添加配置
"lint":"eslint \"src/**/*.{js,vue,ts}\" --fix"
遇到问题：
ESLint couldn't determine the plugin "vue" uniquely.
image.png
解决方案：
在.eslintrc.cjs中添加配置
"root": true,
配置.eslintsrc.cjs
module.exports = {
"env": {
"browser": true,
"es2021": true,
"node":true,
},
"extends": [
// "eslint:recommended",
// "plugin:vue/vue3-essential",
// "plugin:@typescript-eslint/recommended"
"plugin:vue/vue3-strongly-recommended",
"airbnb-base",
"prettier"
],
"overrides": [
],
"parser": "vue-eslint-parser",
// "parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "13",
"parser": "@typescript-eslint/parser",
"sourceType": "module",
"ecmaFeatures":{
tsx:true,
jsx:true
}
},
"globals":{
defineProps:"readonly",
defineEmits:"readonly",
defineExpose:"readonly",
withDefaults:"readonly",
},
"plugins": [
"vue",
"@typescript-eslint"
],
"settings":{
"import/resolver":{
alias:{
map:[["@","./src"]]
}
},
"import/extensions":[".js",".jsx",".ts",".tsx",".mjs"],
},
"rules": {
"import/no-extraneous-dependencies":0,
"no-param-reassign":0,
"vue/multi-word-component-names":0,
"vue/attribute-hyphenation":0,
"vue/v-on-event-hyphenation":0
}
}
五、配置prettier
安装依赖
pnpm install vite-plugin-eslint -D
在vite.config.js引入插件
import eslintPlugin from 'vite-plugin-eslint'
export default defineConfig({
plugins: [eslintPlugin()],
...
})
六、.eslintrcignore
*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
/bin
.eslintrc.js
prettier.config.js
/src/mock/*
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
.DS_Store
dist-ssr
*.local
/cypress/videos/
/cypress/screenshots/
#Editor directories and files
.vscode
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
components.d.ts
七、.prettierrc.cjs
module.exports = {
// 一行最多100字符
printWidth:100,
// 使用2个空格缩进
tabWidth:2,
// 不使用缩进符，而使用空格
useTabs:false,
// 行尾需要分号
semi:false,
// 使用单引号
singleQuote:true,
// 对象的key仅在必要时用引号
quoteProps:"as-needed",
// jsx不使用单引号，而使用双引号
jsxSingleQuote:false,
// 尾随逗号
trailingComma:'es5',
// 大括号内的首尾需要空格
bracketSpacing:true,
// 箭头函数，只有一个参数的时候，也需要括号
arrowParens:'always',
// 每个文件格式化的范围时文件的全部内容
rangeStart:0,
rangeEnd:Infinity,
// 不需要写文件开头的@prettier
requirePragma:false,
// 不需要自动在文件开头插入@prettier
insertPragma:false,
// 使用默认的折行标准
proseWrap:'always',
// 根据显示样式决定html要不要折行
htmlWhitespaceSensitivity:'css',
// 换行符使用lf
endOfLine:'lf'
}
八、.prettierignore
/dist/*
.local
.output.js
/node_modules/**
src/.DS_Store
**/*.svg
**/*.sh
/public/*
components.d.ts
九、设置代码保存，自动格式化
打开vscode "配置"
image.png
image.png
image.png
{
"workbench.colorTheme": "Default Dark+",
"workbench.editorAssociations": {
"*.html": "default"
},
"editor.fontSize": 17,
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.fixAll.eslint": true,
"sourcr.fixAll.stylelint":true
},
"editor.lineHeight": 26,
"editor.letterSpacing": 0.3,
"eslint.format.enable": true,
"workbench.tree.indent": 16,
"workbench.iconTheme": "vscode-icons",
"eslint.alwaysShowStatus": true,
"eslint.debug": true,
"eslint.validate": [
],
"typescript.updateImportsOnFileMove.enabled": "always",
"editor.largeFileOptimizations": false,
"[vue]": {
"editor.formatOnSave":true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
}
修改代码，保存就可以自动修改大多数报错
十、格式化所有范围内的代码
在package.json文件中添加命令
"prettier-format":"prettier --config .prettierrc.cjs \"src/**/*.{vue,js,ts}\" --write"
执行后的效果，会显示格式化后的文件，同时代码也会被格式
image.png
十一、配置tsconfig.ts
{
"compilerOptions": {
// 指定es的模板版本
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
// 决定如何处理模块
"moduleResolution": "Node",
"strict": true,
"jsx": "preserve",
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
// 编译过程中需要引入的库文件列表
"lib": ["ESNext", "DOM"],
// 默认所有可见的@types包会在编译过程中被包含进来
"types":["vite/client"],
// 解析非相对模块名的根准目录
"baseUrl": "./",
// 模块名到基于baseUrl的路径映射列表
"paths": {
"@/*":["src/*"],
"*.ts":["*"]
},
"skipLibCheck": true,
"noEmit": true
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}
十二、配置stylelint
1、vscode 安装插件 “Stylelint”
image.png
2、在setting.json中配置自动保存
"editor.codeActionsOnSave": {
"sourcr.fixAll.stylelint":true
},
"stylelint.validate": [
"css",
"less",
"postcss",
"vue"
],
3、安装style相关库
pnpm install --save-dev stylelint stylelint-config-standard
4、配置相关参数
在根目录新增.stylelintrc.cjs文件，添加相关配置
module.exports = {
extends:[
"stylelint-config-standard"
]
}
5、手动检查css文件格式
在面板执行
npx stylelint "**/*.css"
执行结果如下：
image.png
在该.css文件下保存，便会自动修复这些css报错，上面我们已经配置了相关css的校验
6、配置校验scss相关插件
（1）安装依赖
pnpm install postcss-html stylelint-config-standard-scss stylelint-config-recommended-vue postcss -D
因为vite提供了对scss 、sass、less、styl、stylues文件的内置支持，不需要额外添加对应的预处理器和插件
（2）修改.stylelintrc.cjs配置
module.exports = {
extends:[
"stylelint-config-standard-scss",
"stylelint-config-recommended-vue/scss"
]
}
（3）在package.json添加命令
"lint:css":"stylelint **/*.{vue,css,sass,scss} --fix"
在App.vue文件添加一个错误的css样式，执行以上命令，发现错误，再去指定位置修改即可
image.png
（4）给vite添加插件
安装依赖
pnpm install vite-plugin-stylelint -D
在vite.config.ts添加插件
import StylelintPlugin from 'vite-plugin-stylelint'
export default defineConfig({
plugins: [
...
StylelintPlugin({fix:true})]
})
7、添加到lint-stated,对暂存区的文件进行格式化(提交代码时使用，引入husky)
"lint-staged":{
"*.{js,jsx,vue,ts,tsx}":[
"npm run lint",
"npm run prettier-format"
],
"*.{vue,css,sass}":[
"npm run lint:css"
]
},
8、添加.stylelintignore文件
在根目录添加.stylelintignore文件
.stylelintignore
/dist/*
/public/*
十三、环境变量
在根目录新建.dev,.env.production文件
//开发环境 axios请求路径
.dev
VITE_BASE_URL = 'http://192.168.8.28:8003/'
//生产环境 axios请求路径
.env.production
VITE_BASE_URL = 'https://xxx/'
在package.json配置相关开发、打包、预览命令
scripts：{
"dev": "vite",
"build:prod":"vue-tsc --noEmit && vite build --mode production",
"preview": "vite preview",
}
开发环境，默认调用的mode 的文件为env,
生产环境调用的mode为：.env.production，production 与mode后面接的名称保持一致。
打包后，预览效果，执行preview
变量使用
console.log(import.meta.env.VITE_BASE_URL)
十四、调试功能与配置文件
为了保证代码风格统一，配置一样，可以把vscode的setting.json文件放到项目.vscode目录下
{
"workbench.colorTheme": "Default Dark+",
"workbench.editorAssociations": {
"*.html": "default"
},
"editor.fontSize": 17,
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.fixAll.eslint": true,
"sourcr.fixAll.stylelint":true
},
"stylelint.validate": [
"css",
"less",
"postcss",
"vue"
],
"editor.lineHeight": 26,
"editor.letterSpacing": 0.3,
"eslint.format.enable": true,
"workbench.tree.indent": 16,
"workbench.iconTheme": "vscode-icons",
"eslint.alwaysShowStatus": true,
"eslint.debug": true,
"eslint.validate": [
],
"typescript.updateImportsOnFileMove.enabled": "always",
"editor.largeFileOptimizations": false,
"[vue]": {
"editor.formatOnSave":true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
}