Skip to content

代码规范

安装 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 # 不去除行尾空白