After the blog background management system is used, it is developed based on Vue3+Vite+TS+ESLint+Prettier. The specific project construction is as follows
1. Create a project skeleton of vue-ts template based on Vite
pnpm create vite 项目名称 --template vue-ts
2. Install ESLint and Prettier related
ESLint: Control Code Quality
Prettier: Control Code Style
2.1. Install ESLint and Prettier related packages
pnpm install eslint eslint-plugin-vue eslint-config-prettier prettier eslint-plugin-import eslint-plugin-prettier eslint-config-airbnb-base -D
- eslint: ESLint's core code base
- prettier: Prettier's core codebase for formatted code
- eslint-config-airbnb-base: code specification for airbnb (depends on plugin-import)
- eslint-config-prettier: eslint combined with prettier formatting
- eslint-plugin-vue: code specification for eslint in Vue
- eslint-plugin-import: eslint is supported in the project
2.2. Install ESLint and Prettier related vscode plugins
- ESLint
- Prettier - Code formatter
2.3, configure scripts script, initialize ESLint
"lint:create": "eslint --init"
- Interactive command to execute ESLint configuration
npm run lint:create
- The process of configuring ESLint is as follows
- At this point, the project root directory automatically generates
.eslintrc.cjsfiles
Because .eslintrc is a specification written by node, it follows the commonjs specification, so it has a cjs suffix; if it is an ESModel specification, it has an mjs suffix.
- rewrite
.eslintrc.cjsfile
module.exports = {
// 环境:
env: {
// 浏览器
browser: true,
// 最新es语法
es2021: true,
// node环境
node: true,
},
// 扩展的eslint规范语法，可以被继承的规则
// 字符串数组：每个配置继承它前面的配置
// 分别是：
// eslint-plugin-vue提供的
// eslint-config-airbnb-base提供的
// eslint-config-prettier提供的
// 前缀 eslint-config-, 可省略
extends: ['plugin:vue/vue3-strongly-recommended', 'airbnb-base', 'prettier'],
// eslint 会对我们的代码进行检验
// parser的作用是将我们写的代码转换为ESTree（AST）
// ESLint会对ESTree进行校验
parser: 'vue-eslint-parser',
// 解析器的配置项
parserOptions: {
// es的版本号，或者年份都可以
ecmaVersion: 'latest',
parser: '@typescript-eslint/parser',
// 源码类型 默认是script，es模块用module
sourceType: 'module',
// 额外的语言类型
ecmaFeatures: {
tsx: true,
jsx: true,
},
},
// 全局自定义的宏，这样在源文件中使用全局变量就不会报错或者警告
globals: {
defineProps: 'readonly',
defineEmits: 'readonly',
defineExpose: 'readonly',
withDefault: 'readonly',
},
// 插件
// 前缀 eslint-plugin-, 可省略
// vue官方提供了一个ESLint插件 eslint-plugin-vue，它提供了parser和rules
// parser为 vue-eslint-parser，放在上面的parsr字段，rules放在extends字段里，选择合适的规则
plugins: ['vue', '@typescript-eslint'],
settings: {
// 设置项目内的别名
'import/reslover': {
alias: {
map: [['@', './src']],
},
},
// 允许的扩展名
'import/extensions': ['.js', '.jsx', '.ts', '.tsx', '.mjs'],
},
// 自定义规则，覆盖上面extends继承的第三方库的规则，根据组内成员灵活定义
rules: {
'no-console': 0,
'vue/valid-template-root': 0,
'import/no-extraneous-dependencies': 0, // 解决vite.config.ts的引入报错
'no-param-reassing': 0,
'vue/multi-word-commponent-names': 0,
'vue/attribute-hyphenation': 0,
'vue/v-on-event-hyphenation': 0,
},
};
- Add script script command
"lint": "eslint \"src/**/*.{js,vue,ts}\" --fix"
- Verify that ESLint is configured successfully and
a red line warning will appear
Execute npm run lint
At this point, it proves that ESLint has been configured successfully
- Install eslint support plugin based on vite
pnpm install vite-plugin-eslint -D
Use in vite.config.ts
import eslintPlugin from 'vite-plugin-eslint'
plugins: [eslintPlugin()]
- Combining ESLint and Prettier
Three new root files need to be created:
.eslintrcignore
*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.history
/bin
.eslintrc.js
prettier.config.js
/src/mock/*
vite.config.ts
public/
assets/
build/
vite/
*.html
# Logs
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
*.njsproj
*.sln
*.sw?
components.d.ts
.prettierrc.cjs
module.exports = {
// 一行最多多少字符
printWidth: 80,
// 使用2个空格缩进
tabWidth: 2,
// 使用tab缩进，不使用空格
useTabs: true,
// 行尾需要分号
semi: true,
// 使用单引号
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
*
!src/**/
!**/*.js
!**/*.jsx
!**/*.css
!**/*.scss
!**/*.html
!**/*.vue
!**/*.md
!**/*.ts
!**/*.tsx
# some souces directories
src/assets
/dist/*
.local
.husky
.history
.output.js
/node_modules/**
src/.DS_Store
**/*.svg
**/*.sh
/public/*
components.d.ts
#
CHANGELOG.md
vue.config.js
babel.config.js
commitlint.config.js
vite.config.js
.eslintrc.js
- Use commands to format code [Manually execute commands to combine eslint and prettier]
npm run prettier-format
"prettier-format": "prettier --config .prettierrc.cjs \"src/**/*.{vue,js,ts}\" --write",
3. Installation project startup dependencies
pnpm install typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-import-resolver-alias @types/eslint @types/node -D
- @typescript-eslint/parser: ESLint's parser for parsing typescript to check and standardize typescript code
- @typescript-eslint/eslint-plugin: This is an ESLint plugin that contains various well-defined specifications for detecting Typescript code
- eslint-import-resolver-alias: Use @ and other aliases when importing
4. Rewrite the tsconfig.ts file
{
"compilerOptions": {
// 指定es的目标版本
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
// 决定如何处理模块
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
// 编译过程中需要引入的库文件的列表
"lib": ["ESNext", "DOM", "DOM.Iterable"],
// 默认所有可见的"@types"包会在编译过程中被包含进来
"types": ["vite/client"],
"skipLibCheck": true,
"noEmit": true,
// 解析非相对模块名的基准目录
"baseUrl": ".",
// 模块名到基于baseurl的路径映射的列表
"paths": {
"@/": ["scr/"],
"*.ts": ["*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{
"path": "./tsconfig.node.json" }]
5. About the configuration of Git operation specification
Husky: A hook added to the git client, a function that is automatically triggered before git commit and git push, prohibiting users from submitting some eslint error codes lint- staged: processing the code in
the temporary storage area
like feat or feat
5.1. Install related dependencies
pnpm install lint-staged husky -D
5.2, git initialization project
git init
5.3, configure the script script
"prepare": "husky install",
5.4. Local husky hook function installation
npm run prepare
**Note:** At this time, the root directory of the project is generated: .husky directory
5.5, add git hooks
- pre-commit hook; what is added is lint-staged to format the code in the git temporary storage area
Terminal executes:
npx husky add .husky/pre-commit "npx lint-staged"
5.6. Add the following script command in package.json
// 表示在执行git commit 的时候，会触发pre-commit里的npx lint-staged命令，从而触发package.json里的lint-staged的命令。从而触发npm run lint和npm run prettier-format
"lint-staged": {
"*.{js,jsx,ts,tsx,vue}": [
"npm run lint",
"npm run prettier-format"
]
}
5.7. Configure commit comment verification
- Install related dependencies
pnpm install @commitlint/config-conventional @commitlint/cli -D
- Create a commit-msg hook
npx husky add .husky/commit-msg "npx --no -- commitlint --edit ${1}"
3. Newcommitlint.config.cjs
module.exports = {
extends: ['@commitlint/config-conventional'],
rules: {
'type-enum': [
2,
'always',
[
// 编译相关的修改，例如发布版本，对项目构建或者依赖的改动
'build',
// 新功能(feature)
'feat',
// 修复bug
'fix',
// 更新某功能
'update',
// 重构
'refactor',
// 文档
'docs',
// 构建过程或者辅助工具的变动,如增加依赖库等
'chore',
// 不影响代码运行的变动
'style',
// 撤销commit,回滚到上一个版本
'revert',
// 性能优化
'perf',
// 测试(单元,集成测试)
'test',
],
],
'type-case': [0],
'type-empty': [0],
'scope-empty': [0],
'scope-case': [0],
'subject-full-stop': [0, 'never'],
'subject-case': [0, 'never'],
'header-max-length': [0, 'always', 74],
},
};
6. Verification of stylelint style
6.1, vscode install Stylelint plugin
6.2. Install related dependencies
pnpm install stylelint stylelint-config-standard -D
6.3, Create a new root directory.stylelintrc.cjs
module.exports = {
extends: [
"stylelint-config-standard"
]
}
6.4. Check whether the configuration is successful
npx stylelint "**/*.css"
没有报错则配置成功
6.5. Formatting of scss
- install dependencies
pnpm install postcss-html stylelint-config-standard-scss stylelint-config-recommended-vue postcss vite-plugin-stylelint -D
- Revise
.stylelintrc.cjs
module.exports = {
extends: [
"stylelint-config-standard-scss",
"stylelint-config-recommended-vue/scss",
]
}
3, script placement
"lint:css": "stylelint **/*.{vue,css,sass,scss} --fix"
- package.json add
"*.{vue,less,css,scss,sass}": [
"npm run lint:css"
]
Before git commit, check the style of the code in the temporary storage area
4. Create a new one.stylelintignore
/dist/*
/public/*
7. Other configurations
7.1, new.editorconfig
# http://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
insert_final_newline = false
trim_trailing_whitespace = false
7.2. Build packaging behaviors in different environments
"build:dev": "vue-tsc --noEmit && vite build --mode development",
"build:pro": "vue-tsc --noEmit && vite build --mode production"
7.3, Supplement to package.json file
{
"name": "smartweb-vue3",
"version": "0.0.0",
"description": "A Vue3 Admin Template",
"author": "South Smart",
"engines": {
"node": ">= 16"
},
"scripts": {
"dev": "vite",
"build": "vite build",
"build:dev": "vite build --mode dev",
"preview": "vite preview",
"serve": "vite preview",
"lint": "yarn lint:es && yarn lint:style && vue-tsc --noEmit",
"lint:es": "eslint src/**/*.{js,jsx,ts,tsx,vue} --max-warnings 0 --fix",
"lint:style": "stylelint src/**/*.{css,scss,vue} --fix",
"lint:vue-tsc": "vue-tsc --noEmit",
"deploy": "./deploy.sh",
"deploy:dev": "./deploy-dev.sh",
"format": "prettier --write .",
"prepare": "husky install",
"preinstall": "node ./build/yarn/check-yarn.js",
"postinstall": "patch-package"
},
"dependencies": {
"@element-plus/icons-vue": "^1.1.4",
"@turf/turf": "^6.5.0",
"buffer": "^6.0.3",
"dayjs": "^1.10.8",
"echarts": "^5.3.1",
"echarts-gl": "^2.0.9",
"element-plus": "2.2.x",
"js-base64": "^3.7.5",
"jsencrypt": "^3.2.1",
"lodash-es": "^4.17.21",
"moment": "^2.29.4",
"nprogress": "^0.2.0",
"pdfjs-dist": "^3.0.279",
"proj4": "^2.8.0",
"qs": "^6.11.0",
"sm-crypto": "^0.3.6",
"smart-ui": "^1.0.2-alpha.0",
"smart3d": "^2.5.1",
"smart3d-vue": "1.1.0-beta.3",
"uuid": "^9.0.0",
"vue": "^3.2.35",
"vue-router": "^4.0.15",
"vue-smart-upload": "^3.0.0"
},
"devDependencies": {
"@babel/core": "^7.16.0",
"@commitlint/cli": "^15.0.0",
"@smart/commitlint-config": "^0.1.2",
"@smart/eslint-config-typescript": "^1.1.0",
"@smart/unplugin-vue-resolvers": "^1.0.0",
"@types/babel__core": "^7.1.16",
"@types/ejs": "^3.1.0",
"@types/html-minifier-terser": "^6.1.0",
"@types/lodash": "^4.14.176",
"@types/lodash-es": "*",
"@types/qs": "^6.9.7",
"@types/sm-crypto": "^0.3.0",
"@typescript-eslint/eslint-plugin": "^4.31.1",
"@typescript-eslint/parser": "^4.31.1",
"@vitejs/plugin-vue": "^1.6.1",
"@vitejs/plugin-vue-jsx": "^1.3.8",
"@vue/compiler-sfc": "^3.2.6",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^7.0.0",
"axios": "^0.24.0",
"eslint": "^7.32.0",
"eslint-define-config": "^1.1.2",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-vue": "^7.17.0",
"husky": "^7.0.4",
"lint-staged": "11.2.6",
"mockjs": "^1.1.0",
"patch-package": "^6.4.7",
"pinia": "^2.0.14",
"postcss": "^8.4.14",
"postcss-html": "^1.4.1",
"prettier": "^2.4.1",
"pretty-quick": "^3.1.2",
"rollup": "^2.74.1",
"rollup-plugin-copy": "^3.4.0",
"rollup-plugin-external-globals": "^0.6.1",
"sass": "^1.44.0",
"stylelint": "^14.8.3",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-recess-order": "^3.0.0",
"stylelint-config-recommended-vue": "^1.4.0",
"stylelint-config-standard": "^25.0.0",
"stylelint-config-standard-scss": "^3.0.0",
"typescript": "4.3.2",
"unplugin-vue-components": "^0.22.8",
"vite": "^2.5.4",
"vite-plugin-externals": "^0.3.0",
"vite-plugin-html": "^2.1.1",
"vite-plugin-mock": "^2.9.6",
"vite-plugin-vue-setup-extend": "^0.1.0",
"vue-tsc": "^1.0.3"
},
"lint-staged": {
"*.{js,jsx,ts,tsx,vue}": "eslint --fix",
"*.{css,scss,vue}": "stylelint --fix"
},
"browserslist": [
"> 1%",
"not ie 11",
"not op_mini all"
]