vscode设置
一、注释
-
插件 koroFileHeader
-
setting.json添加配置
// korofileheader 注释插件 设置里面找到 Custom Made 写入以下配置 "fileheader.customMade": { //此为头部注释 "Description": "", "Author": "", "Date": "Do not edit", "LastEditors": "", "LastEditTime": "Do not edit" }, //此为函数注释 "fileheader.cursorMode": { "description": "", "param": "", "return": "", "author": "" }, -
使用
ctrl+alt+i //添加 文件头 注释 ctrl+alt+t //添加 函数 注 //注意：如果不生效，可能与其他快捷方式冲突，修改即可
二、ESLint + Prettier 保存时自动修复代码
ESLint ：代码检查+代码格式化工具。
Prettier：代码格式化工具。
vetur：vue代码格式化工具，底层默认的是Prettier。
-
vscode安装以下插件
EsLint、vetur、Prettier - Code formatter
-
setting.json添加配置
// 每次保存自动格式化ctrl+s "editor.formatOnSave": true, // 每次保存的时候将代码按eslint格式进行修复 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "editor.tabSize": 4, "editor.wordWrap": "on", //开启自动换行 //配置内配置对 .ts 文件的格式化 "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, //配置内配置对 .js 文件的格式化 "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, //配置内配置对 .json 文件的格式化 "[jsonc]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "editor.fontLigatures": true, "[json]": { "editor.quickSuggestions": { "strings": true }, "editor.suggest.insertMode": "replace" }, //只有一个参数的箭头函数的参数是否带圆括号(默认avoid) // 使用单引号 "prettier.singleQuote": true, // 末尾不加分好 "prettier.semi": false, // ---------- vetur ---------- "[vue]": { "editor.defaultFormatter": "octref.vetur" }, "vetur.format.defaultFormatter.html": "prettyhtml", "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.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "preserve-aligned" }, "prettyhtml": { "singleQuote": false, "sortAttributes": false }, "prettier": { "singleQuote": true, //使用单引号 "printWidth": 100, "semi": true,//分号 "eslintIntegration": true//支持eslint格式化 } }
项目中设置规范
首先在项目安装依赖，pckage.json
{
"scripts": {
"lint": "eslint \"src/**/*.{js, vue}\""
}，
"devDependencies": {
"@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^7.0.0-0",
"prettier": "^1.19.1"
}
}然后配置lint规则，.eslintrc.js
module.exports = {
root: true,
env: {
node: true,
},
extends: [ " plugin:vue/vue3-essential", "eslint : recommended", "@vue/prettier"],
parserOptions:{
parser: "babel-eslint",ss
},
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
"prettier/prettier": [
"warn",
{
singleQuote: true, //单引号
semi: true, //结尾带分号
trailingComma: "es5",
},
],
},
};如果有必要还可以配置prettier .config. js修改prettier的默认格式化规则
module.exports = {
printWidth: 100, //每行代码长度(默认80)
tabWidth: 4, //每个tab相当于多少个空格 (默认2)
useTabs: false, //是否使用tab进行缩进(默认false)
singleQuote: true, //使用单引号(默认false)
semi: true ,//声明结尾使用分号(默认true)
trailingComma: 're5', //多行使用拖尾逗号(默认none)
bracketSpacing: true, //对象字面量的大括号间使用空格(默认true)
jsxBracketSameLine: false, //多行JSX中的> 放置在最后一行的结尾， 而不是另起一行
arrowParens:"avoid", //只有一个参数的箭头函数的参数是否带圆括号(默认avoid)
};npm run lint 检查语法hbuilder设置
安装插件 eslint-plugin-vue、prettier
prettier.config.js
module.exports = {
printWidth: 100, //每行代码长度
semi: true,//每行是够有分好
tabWidth: 4,//每行缩进4格
useTabs: false,// 缩进不使用tab，使用空格
singleQuote: true,//是否单引号
trailingComma: "es5",// 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
bracketSpacing: true,// 在对象，数组括号与文字之间加空格 "{ foo: bar }"
htmlWhitespaceSensitivity: "ignore",
parsers: {
".jsx": "flow",
".scss": "scss",
".ts": "typescript",
".less": "css",
".vue": "vue",
".nvue": "vue",
".ux": "vue",
".yml": "yaml",
}
}如果不起作用，可能是项目中存在 .editconfig.js，覆盖了相关属性
.editorconfig.js
root = true
# 对所有文件生效
[*]
# utf-8编码
charset = utf-8
# 空格形式缩进2空格
indent_style = space
indent_size = 2
# 使用单引号
quote_type = single
# Linux换行符
end_of_line = lf
# 结尾插入新行
insert_final_newline = true
# 去除结尾空格
trim_trailing_whitespace = true
# 对后缀名为 md 的文件生效
[*.md]
trim_trailing_whitespace = false自定义注释
{
"file-annotation": {
"prefix": "anno",
"body": [
"/**",
" * @Description:",
" * @author Wangyanhong",
" * @createTime: $DATE_TIME",
" */"
],
"triggerAssist": false,
"description": "file annotation"
},
"method-annotation": {
"prefix": "anno",
"body": [
"/**",
" * @Description",
" * @param $1",
" * @return $2",
" */"
],
"triggerAssist": false,
"description": "method annotation"
}
}
prettier配置详细
/* prettier的配置 */
"prettier.printWidth": 100, // 超过最大值换行
"prettier.tabWidth": 4, // 缩进字节数
"prettier.useTabs": false, // 缩进不使用tab，使用空格
"prettier.semi": true, // 句尾添加分号
"prettier.singleQuote": true, // 使用单引号代替双引号
"prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
"prettier.arrowParens": "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
"prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
"prettier.disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置
"prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
"prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
"prettier.htmlWhitespaceSensitivity": "ignore",
"prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
"prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
"prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
"prettier.parser": "babylon", // 格式化的解析器，默认是babylon
"prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
"prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
"prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
"prettier.tslintIntegration": false // 不让prettier使用tslint的代码格式进行校验
扫一扫
503
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
