致谢:有来技术大大
通过学习有来技术大大的文章和结合自己的实践,写一篇笔记记录一下
VSCode 搜索 EditorConfig for VS Code
插件并安装
作用:使项目代码风格保持一致
步骤:在项目中创建 .editorconfig
文件
# https://editorconfig.org
root = true
[*] # 表示适用于所有文件
charset = utf-8 # 设置文件字符为utf-8
indent_style = space # 缩进风格(tab | space)
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
insert_final_newline = true # 始终在文件末尾插入一个新行
trim_trailing_whitespace = true # 去除行首的任意空白字符
[*.md] #表示仅 md 文件适用
insert_final_newline = false
trim_trailing_whitespace = false
代码规范工具
- ESLint
- Prettier
- StyleLint
ESLint: 一个用于检查和修复 JavaScript 代码中问题的代码检测工具。它能够帮助你发现并修复 JavaScript 代码中的问题
#如果使用脚手架创建的项目集成了eslint,可忽略
# 1、安装
npm i eslint -D
# 2、生成配置
npx eslint --init
然后根据自己的需要选择配置,完成后项目中会生成 .eslintrc.js
或 .eslintrc.cjs
文件,一下以 .eslintrc.cjs
为例
module.exports = {
root: true,
env: {
node: true,
},
extends: [
"plugin:vue/essential",
"eslint:recommended",
"plugin:prettier/recommended",
],
parserOptions: {
parser: "@babel/eslint-parser",
},
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
},
};
在默认配置基础上需要修改解析器为 vue-eslint-parser
,不然在检测执行中出现 error Parsing error: '>' expected
的解析错误,修改 .eslintrc.cjs
,最终文件放于最后
dist
node_modules
public
.husky
.vscode
.idea
*.sh
*.md
src/assets
.eslintrc.cjs
.prettierrc.cjs
.stylelintrc.cjs
package.json
添加 eslint 检测指令:
"scripts": {
"lint:eslint": "eslint \"src/**/*.{vue,ts,js}\" --fix"
}
# eslint检测
npm run lint:eslint
prettier是一款强大的代码格式化工具,文档
npm install prettier -D
根目录创建配置文件.prettierrc.cjs
和格式化忽略配置文件.prettierignore
// 详细配置:https://www.prettier.cn/docs/options.html
module.exports = {
// (x)=>{},单个参数箭头函数是否显示小括号。(always:始终显示;avoid:省略括号。默认:always)
arrowParens: "always",
// 开始标签的右尖括号是否跟随在最后一行属性末尾,默认false
bracketSameLine: false,
// 对象字面量的括号之间打印空格 (true - Example: { foo: bar } ; false - Example: {foo:bar})
bracketSpacing: true,
// 是否格式化一些文件中被嵌入的代码片段的风格(auto|off;默认auto)
embeddedLanguageFormatting: "auto",
// 指定 HTML 文件的空格敏感度 (css|strict|ignore;默认css)
htmlWhitespaceSensitivity: "css",
// 当文件已经被 Prettier 格式化之后,是否会在文件顶部插入一个特殊的 @format 标记,默认false
insertPragma: false,
// 在 JSX 中使用单引号替代双引号,默认false
jsxSingleQuote: false,
// 每行最多字符数量,超出换行(默认80)
printWidth: 120,
// 超出打印宽度 (always | never | preserve )
proseWrap: "preserve",
// 对象属性是否使用引号(as-needed | consistent | preserve;默认as-needed:对象的属性需要加引号才添加;)
quoteProps: "as-needed",
// 是否只格式化在文件顶部包含特定注释(@prettier| @format)的文件,默认false
requirePragma: false,
// 结尾添加分号
semi: true,
// 使用单引号 (true:单引号;false:双引号)
singleQuote: false,
// 缩进空格数,默认2个空格
tabWidth: 2,
// 元素末尾是否加逗号,默认es5: ES5中的 objects, arrays 等会添加逗号,TypeScript 中的 type 后不加逗号
trailingComma: "es5",
// 指定缩进方式,空格或tab,默认false,即使用空格
useTabs: false,
// vue 文件中是否缩进