代码规范
安装 eslint 和 prettier
ts
pnpm i eslint -D
pnpm i prettier eslint-config-prettier eslint-plugin-prettier -D
pnpm i typescript @typescript-eslint/parser @nuxtjs/eslint-config-typescript -D
配置
在根目录下创建 .eslintrc.js
文件
js
module.exports = {
root: true,
// extends: ['@nuxt/eslint-config'],
parserOptions: {
ecmaVersion: "latest",
},
rules: {
eqeqeq: 2 /**要求使用 === 和 !== */,
"vue/multi-word-component-names": 0 /**针对单个单词组件报错的规则关闭 */,
"no-undef": 0 /**关闭变量未定义检查 */,
"no-debugger": 2 /**禁用 debugger */,
"no-dupe-args": 2 /**禁止 function 定义中出现重名参数 */,
"no-dupe-keys": 2 /**禁止对象字面量中出现重复的 key */,
"no-empty": 1 /**禁止出现空语句块 */,
"no-ex-assign": 1 /**禁止对 catch 子句的参数重新赋值 */,
"no-extra-boolean-cast": 1 /**禁止不必要的布尔转换 */,
"no-extra-parens": 1 /**禁止不必要的括号 */,
"no-extra-semi": 1 /**禁止不必要的分号 */,
"no-func-assign": 1 /**禁止对 function 声明重新赋值 */,
"no-irregular-whitespace": 1 /**禁止在字符串和注释之外不规则的空白 */,
"no-unexpected-multiline": 1 /**禁止出现令人困惑的多行表达式 */,
"no-unreachable": 1 /**禁止在return、throw、continue 和 break语句之后出现不可达代码 */,
"use-isnan": 1 /**要求使用 isNaN() 检查 NaN */,
"dot-location": 1 /**强制在点号之前和之后一致的换行 */,
"no-alert": 1 /**禁用 alert、confirm 和 prompt */,
"no-case-declarations": 1 /**不允许在 case 子句中使用词法声明 */,
"no-else-return": 1 /**禁止 if 语句中有 return 之后有 else */,
"no-empty-function": 1 /**禁止出现空函数 */,
"no-eq-null": 1 /**禁止在没有类型检查操作符的情况下与 null 进行比较 */,
"no-eval": 1 /**禁用 eval() */,
"no-fallthrough": 1 /**禁止 case 语句落空 */,
"no-lone-blocks": 1 /**禁用不必要的嵌套块 */,
"no-redeclare": 1 /**禁止使用 var 多次声明同一变量 */,
"no-self-assign": 1 /**禁止自我赋值 */,
"no-self-compare": 1 /**禁止自身比较 */,
"no-unmodified-loop-condition": 1 /**禁用一成不变的循环条件 */,
"vars-on-top": 1 /**要求所有的 var 声明出现在它们所在的作用域顶部 */,
"eol-last": 1 /**强制文件末尾至少保留一行空行强制文件末尾至少保留一行空行 */,
},
};
再在根目录下创建 .prettierrc.cjs
文件
ts
module.exports = {
/*打印宽度,超过后,会将属性换行*/
printWidth: 120,
/*禁止使用尾随逗号,对象和数组最后一个逗号去掉*/
trailingComma: "none",
/*在对象字面量中的括号之间添加空格*/
bracketSpacing: true,
/*使用单引号而不是双引号来定义字符串*/
singleQuote: true,
/*当箭头函数只有一个参数时,省略参数前后的括号*/
arrowParens: "avoid",
/*script和style标签中间的内容缩进*/
vueIndentScriptAndStyle: true,
// 将>多行 HTML(HTML、JSX、Vue、Angular)元素放在最后一行的末尾,而不是单独放在下一行(不适用于自闭合元素
bracketSameLine: false,
};
ediotrconfig
在根目录下创建 .editorconfig
文件,这样不同的编辑器 格式一样
ts
// .editorconfig 文件
# http://editorconfig.org
root = true
[*] # 表示所有文件
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格(tab | space)
indent_size = 4 # 缩进大小
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 # 不去除行尾空白