代码规范技术栈
代码格式规范和语法检测
- vscode：统一前端编辑器。
- editorconfig: 统一团队vscode编辑器默认配置。
- prettier: 保存文件自动格式化代码。
- eslint: 检测代码语法规范和错误。
- lint-staged: 只检测暂存区文件代码，优化eslint检测速度
代码git提交规范
husky:可以监听githooks执行，在对应hook执行阶段做一些处理的操作。
pre-commit：githooks之一， 在commit提交前使用tsc和eslint对语法进行检测。
commit-msg：githooks之一，在commit提交前对commit备注信息进行检测。
commitlint：在githooks的pre-commit阶段对commit备注信息进行检测。
commitizen：git的规范化提交工具，辅助填写commit信息。
editorconfig统一编辑器配置
安装vscode插件EditorConfig
打开vsocde插件商店，搜索EditorConfig for VS Code，然后进行安装。
添加.editorconfig配置文件
安装插件后，在根目录新增 .editorconfig配置文件:
root = true # 控制配置文件 .editorconfig 是否生效的字段
[**] # 匹配全部文件
indent_style = space # 缩进风格，可选space｜tab
indent_size = 2 # 缩进的空格数
charset = utf-8 # 设置字符集
trim_trailing_whitespace = true # 删除一行中的前后空格
insert_final_newline = true # 设为true表示使文件以一个空白行结尾
end_of_line = lf
[**.md] # 匹配md文件
trim_trailing_whitespace = false
添加.vscode/settings.json
在项目根目录新建 .vscode文件夹，内部新建settings.json文件配置文件，内容如下：
{
"search.exclude": {
"/node_modules": true,
"dist": true,
"pnpm-lock.sh": true
},
"editor.formatOnSave": true,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[markdown]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"liveServer.settings.port": 5502
}
安装vscode插件Prettier
打开vsocde插件商店，搜索Prettier - Code formatter，然后进行安装。
添加.prettierrc.js配置文件
安装插件后，在根目录新增 .prettierrc.js配置文件，配置内容如下：
module.exports = {
printWidth: 100, // 一行的字符数，如果超过会进行换行
tabWidth: 2, // 一个tab代表几个空格数，默认就是2
useTabs: false, // 是否启用tab取代空格符缩进，.editorconfig设置空格缩进，所以设置为false
semi: false, // 行尾是否使用分号，默认为true
singleQuote: true, // 字符串是否使用单引号
trailingComma: 'none', // 对象或数组末尾是否添加逗号 none| es5| all
jsxSingleQuote: true, // 在jsx里是否使用单引号，你看着办
bracketSpacing: true, // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
arrowParens: "avoid", // 箭头函数如果只有一个参数则省略括号
}
eslint+lint-staged检测代码
安装eslint依赖 npm install eslint -D
安装eslint后，执行npm init @eslint/config，选择自己需要的配置
- 选择es lin t检测问题
- 使用的模块规范是es module
- 使用框架是react,使用ts
- 代码运行在浏览器端
- eslint配置文件使用js 格式
- 安装相关依赖，使用npm
选择完成后会在根目录下生成.eslint.js文件，配置如下；
module.exports = {
env: {
browser: true,
es2021: true
},
extends: [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended"
],
parser: "@typescript-eslint/parser",
parserOptions: {
ecmaFeatures: {
jsx: true
},
ecmaVersion: "latest",
sourceType: "module"
},
plugins: ["react", "@typescript-eslint"],
rules: {
}
};
设置中文语言
- 打开VSCode软件，按住键盘上的“Ctrl+Shift+P”组合键，打开命令面板。
- 在命令面板中输入“Configure Display Language”，然后点击“Configure Display Language”选项。
- 在弹出的语言选择列表中，选择“zh-cn”，表示简体中文。
- 点击“Restart”按钮，重启VSCode软件。
- 重启后，VSCode的界面将变成中文。
自定义模板
- 点击文件---首选项---用户片段
- 新建全局代码片段文件
"Print to console": {
"scope": "vue,javascript,typescript",
"prefix": "vue3",
"body": [
"<template>",
" <div></div>",
"</template>",
"<script setup>",
"import {ref,reactive} from 'vue'",
"const data = ref()",
"const state = reactive({})",
"onMounted(async() => {",
"})",
"</script>",
"<style lang=\"scss\" scoped>",
"</style>",
"$2"
],
"description": "Log output to console"
}
- vue文件中，输入vue3，自动弹出选项，创建vue3的模板
