- 小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
前端代码规范使用结合工具
- 编码环境：
1. 安装相关扩展程序：koroFileHeader、Prettier、Vetur、ESLint
- 参考文档：
2. VSCode settings.json 配置: koroFileHeader、Prettier、Vetur、ESLint
- 快捷键使用工具：
- 注释功能：
- 头部注释：
Ctrl + alt + i直接按住快捷键，即可在当前文件头部生成
- 函数注释：
Ctrl + alt + t鼠标光标移到到目标函数的上一行，再按快捷键
- 头部注释：
- 代码格式化功能：
Shift + alt + fVetur + Prettier 的快捷使用
- 代码规范和错误检查修复功能：
Ctrl + SESLint 的快捷使用。
别忘了在当前项目配置好eslint文件，否则单单只有vscode settings是无效的。
VSCode扩展工具 4. 代码规范和错误检查修复工具ESLint
- 注释功能：
{
"editor.tabSize": 2, // tab 大小为2个空格
"editor.wordWrap": "on",
"workbench.colorTheme": "SynthWave '84",
"files.associations": {
"*.js": "javascript",
"*.md": "markdown",
"*.wxml": "wxml",
"*.vue": "vue"
},
"diffEditor.ignoreTrimWhitespace": false,
"window.zoomLevel": 0,
"liveServer.settings.CustomBrowser": "chrome",
/* koro1FileHeader ->Start */
// 插件配置选项
"fileheader.configObj": {
"createFileTime": true, // 当前时间/创建文件时间, 设为false更改为当前生成注释的时间
"language": {
"languagetest": {
"head": "/$$",
"middle": " $ @",
"end": " $/"
}
},
"autoAdd": false,
"autoAddLine": 100,
"autoAlready": false,
"annotationStr": {
"head": "/*",
"middle": " * @",
"end": " */",
"use": false
},
"headInsertLine": {
"php": 2,
"sh": 2
},
"beforeAnnotation": {
"文件后缀": "该文件后缀的头部注释之前添加某些内容"
},
"afterAnnotation": {
"文件后缀": "该文件后缀的头部注释之后添加某些内容"
},
"specialOptions": {
"特殊字段": "自定义比如LastEditTime/LastEditors"
},
"switch": {
"newlineAddAnnotation": true
},
"supportAutoLanguage": [],
"prohibitAutoAdd": [
"json"
],
"folderBlacklist": [
"node_modules",
"文件夹禁止自动添加头部注释"
],
"prohibitItemAutoAdd": [
"项目的全称, 整个项目禁止自动添加头部注释, 可以使用快捷键添加"
],
"moveCursor": true,
"dateFormat": "YYYY-MM-DD HH:mm:ss", // moment.js的format方法的参数
"atSymbol": [
"@",
"@"
],
"atSymbolObj": {
"文件后缀": [
"头部注释@符号",
"函数注释@符号"
]
},
"colon": [
": ",
": "
],
"colonObj": {
"文件后缀": [
"头部注释冒号",
"函数注释冒号"
]
},
"filePathColon": "路径分隔符替换",
"showErrorMessage": false,
"writeLog": false,
"wideSame": true, // // 设置为true开启等宽设置
"wideNum": 13, // 头部注释等宽设置wideSame
"functionWideNum": 0, // 函数注释等宽设置:0 默认关闭 设置一个正整数即可开启 比如12
"CheckFileChange": false,
"createHeader": false, // 新建文件自动添加头部注释
"useWorker": false,
"designAddHead": false,
"headDesignName": "random",
"headDesign": false,
"cursorModeInternalAll": {},
"openFunctionParamsCheck": true, // 函数注释自动提取函数的参数
"functionParamsShape": [
"{",
"}"
],
"functionBlankSpaceAll": {},
"functionTypeSymbol": "*",
"typeParamOrder": "type param", // 参数类型 和 参数的位置自定义
"customHasHeadEnd": {},
"throttleTime": 60000
},
// 在光标处插入函数注释
"fileheader.cursorMode": {
"func": "",
"description": "",
"param": "Do not edit",
"return": "Do not edit",
"example": ""
},
// 头部注释
"fileheader.customMade": {
"Author": "JK",
"Date": "Do not edit",
"LastEditors": "JK",
"LastEditTime": "Do not edit",
"FilePath": "no item name", // 去掉项目名称, only file name可以去掉路径，只展示文件名
"Description": "",
"custom_string_obkoro1_copyright": "Copyright ${now_year} OBKoro1, All Rights Reserved. ", // 版权声明 保留所有权利 自动替换年份
"custom_string_obkoro1_date": "Do not edit" // 版权时间
},
/* koro1FileHeader ->End */
/* Prettier ->Start */
"prettier.printWidth": 100, // 超过最大值换行
"prettier.tabWidth": 2, // 缩进字节数
"prettier.useTabs": false, // 缩进不使用tab，使用空格
"prettier.semi": true, // 句尾添加分号
"prettier.singleQuote": true, // 使用单引号代替双引号
"prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
"prettier.arrowParens": "always", // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
"prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
"prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
"prettier.htmlWhitespaceSensitivity": "ignore",
"prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
"prettier.jsxBracketSameLine": true, // 在jsx中把'>' 是否单独放一行,不适用于自关闭元素
"prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
"prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
"prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
"terminal.integrated.allowMnemonics": true,
"terminal.integrated.automationShell.linux": "", // 不让prettier使用tslint的代码格式进行校验
"prettier.vueIndentScriptAndStyle": true, // 是否缩进Vue 文件中的代码<script>和<style>标签
/* 当 requirePragma 和 insertPragma 两个选项同时使用时，--require-pragma具有优先权 */
"prettier.requirePragma": false, // 需要写文件开头的 @prettier
"prettier.insertPragma": false, // 在文件顶部插入一个特殊标记'@format'，指定文件已使用 Prettier 格式化
"prettier.quoteProps": "as-needed", // 仅在需要时在对象属性周围添加引号
"prettier.embeddedLanguageFormatting": "auto", // 自动识别嵌入代码，对其进行格式化, 如在 JavaScript 中带有标记的标记模板html或 Markdown 代码块
/* Prettier ->End */
/* Vetur ->Start */
"vetur.format.defaultFormatter.html": "prettier", // Valid values: "none", "prettier", "js-beautify-html". 配置值范围取决于你当前编辑器所安装的格式化扩展程序，如js-beautify-html => Beautify 扩展程序
"vetur.format.defaultFormatter.pug": "prettier",
"vetur.format.defaultFormatter.css": "prettier",
"vetur.format.defaultFormatter.postcss": "prettier",
"vetur.format.defaultFormatter.scss": "prettier",
"vetur.format.defaultFormatter.less": "prettier",
"vetur.format.defaultFormatter.stylus": "stylus-supremacy",
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatter.ts": "prettier",
"vetur.format.defaultFormatter.sass": "sass-formatter",
"vetur.format.options.tabSize": 2,
"vetur.format.options.useTabs": true, // 是否利用tab替代空格
"vetur.format.styleInitialIndent": true, // 对vue文件中的style是否统一缩进格式
"vetur.format.scriptInitialIndent": true, // 对vue文件中的script是否统一缩进格式
// "vetur.ignoreProjectWarning": true, // 忽略提示
// 支持自定义块显示格式
"vetur.grammar.customBlocks": {
"docs": "md",
"i18n": "json"
},
// vetur格式 HTML 模板
"vetur.format.defaultFormatterOptions": {
"prettier": {
"printWidth": 100,
"tabWidth": 2,
"singleQuote": true, // 用单引号
"semi": false, // 不加分号
"trailingComma": "none", // 禁止末尾添加逗号
"javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 函数括号前是否加空格
"typescript.format.insertSpaceBeforeFunctionParenthesis": true, // 函数括号前是否加空格
"arrowParens": "avoid" // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
},
// Beautify 扩展程序
"js-beautify-html": {},
// 已弃用
"prettyhtml": {}
},
"[vue]": {
// 定义一个默认格式化程序, 该格式化程序优先于所有其他格式化程序设置。必须是提供格式化程序的扩展的标识符
"editor.defaultFormatter": "octref.vetur",
// "editor.formatOnSave": true, // 保存时是否自动格式化
},
/* Vetur ->End */
/* ESLint ->Start */
"eslint.enable": true, // eslint检验开关, 关闭需要显示定义false值
"eslint.format.enable": true, // 启用 ESLint 作为已验证文件的格式化程序
"editor.codeActionsOnSave": { // 保存时自动修复
"source.fixAll.eslint": true, // 保存后代码将自动按eslint格式进行修复
},
// 添加支持类型校验
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"html",
"vue"
],
/* ESLint ->End */
}
