前端规范的作用主要有以下几点： 1.维护代码风格的一致性，提高可读性和可维护性； 2.减少团队成员之间的沟通障碍，促进协作开发； 3.降低项目的技术债务，提高代码质量和稳定性； 4.提高代码的可重用性和可扩展性，有利于后续的开发和维护工作； 5.符合行业标准和最佳实践，有助于提高团队的专业水平和竞争力。
js
"editor.codeActionsOnSave": {
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
"vue",
"html",
"typescript",
{
"language": "vue",
"autoFix": true
},
{
"language": "typescript",
"autoFix": true
},
{
"language": "typescriptreact",
"autoFix": true
},
"html"
],
"eslint.alwaysShowStatus": true
},
`
#### Prettier
自动格式化代码,安装统一标准插件格式化代码,可以防止因为格式化导致的冲突。安装Prettier- Code formatter插件,在 VS Code 的配置中搜索 Format On Save,找到配置项勾选后就可以在保存文件的时候进行格式化,在首选项中配置：
`js
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
`
#### Stylelint
自动格式化css样式,在editor.codeActionsOnSave中添加 "source.fixAll.stylelint": true 配置，以及添加"stylelint.validate": ["css", "scss", "vue", "html"]
#### setting.json 文件完整配置项
把这段json文件放到首选项的setting.json文件中,全部复制。
`js
{
"git.confirmSync": false,
"security.workspace.trust.untrustedFiles": "open",
"explorer.confirmDelete": false,
"git.enableSmartCommit": true,
"vetur.grammar.customBlocks": {
"docs": "md",
"i18n": "json"
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.codeActionsOnSave": {
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
"vue",
"html",
"typescript",
{
"language": "vue",
"autoFix": true
},
{
"language": "typescript",
"autoFix": true
},
{
"language": "typescriptreact",
"autoFix": true
},
"html"
],
"eslint.alwaysShowStatus": true,
"source.fixAll.stylelint": true
},
"eslint.execArgv": null,
"editor.formatOnSave": true,
"eslint.codeActionsOnSave.rules": null,
"liveServer.settings.AdvanceCustomBrowserCmdLine": "",
"stylelint.validate": ["css", "scss", "vue", "html"]
}
`
$3
- Git COMMIT 校验
- ESlint 校验
- Stylelint 校验
$3
- 注释要清晰明了，尽可能使用简洁易懂的语言，避免使用缩写或专业术语。
- 对于重要的代码块或函数，应该添加详细的注释，解释代码的用途、实现原理等。
- 对于非常量变量或复杂表达式，建议添加注释来阐明其含义和目的。
- 避免使用无意义的注释，比如“这里是一个循环”之类的。
- 确保注释与代码实际操作相符合，及时更新注释以反映代码的变化。
`js
/**
* 函数/方法的功能描述
*
* @param {参数类型} 参数名称 - 参数描述
* @return {返回值类型} 返回值描述
* @author 作者
*/
function functionName(parameter) {
// 函数/方法的具体实现
}
`
`js
// 后面添加注释文本即可。如果需要对注释进行分类或标记，可以使用特定的注释格式，如：
// TODO: 用于标记需要完成的任务。其他常用的注释格式还包括：
// FIXME: 标记需要修复的问题；
// BUG: 标记已知的 bug；
// HACK: 暂时解决问题的代码；
// NOTE: 提供额外的信息或提醒。
`
vscode配置注释模板,打开首选项,用户代码片段，选择typescript.json(因为用的都是ts,js也可以选择js的配置)
复制模板配置Json:
`js
"Function JSDoc Comment": {
"prefix": "/**",
"body": [
" /**",
" * $0",
" *",
" * @param {${1:类型}} ${2:参数名称} - ${3:参数描述}",
" * @return {${4:返回值类型}} ${5:返回值描述}",
" * @author 李田杰",
" */"
],
"description": "Add JSDoc comment for function"
},
"TODO": {
"prefix": "/t",
"body": "// TODO: $1",
"description": "Add a TODO comment."
},
"FIXME": {
"prefix": "/f",
"body": "// FIXME: $1",
"description": "Add a FIXME comment."
},
"BUG": {
"prefix": "/b",
"body": "// BUG: $1",
"description": "Add a BUG comment."
},
"HACK": {
"prefix": "/h",
"body": "// HACK: $1",
"description": "Add a HACK comment."
},
"NOTE": {
"prefix": "/n",
"body": "// NOTE: $1",
"description": "Add a NOTE comment."
}
``