前端代码规范化

eslint

由于js不是编译型的语法，在开发过程中无法发现错误，只有在运行的时候才可以看到。eslint插件可以帮助我们在开发过程中对代码进行检查，帮助我们发现错误。我们可以自定义规则让eslint帮助我们校验代码。

eslint的使用步骤

1、安装eslint

npm i eslint -D

2、初始化eslint配置文件，第一步第二步也可以合为npm init @eslint/config

npx eslint --init

3、如果有需要，安装可以支持检查vue文件语法的插件eslint-plugin-vue

npm i -D eslint-plugin-vue

4、忽略文件，创建.eslintignore文件忽略eslint检查的文件
5、执行eslint代码检查命令

eslint --ext .js src/js

6、修复代码

eslint --ext .js src/js --fix

prettier

prettier是用来代码格式化的工具，使代码看上去更加美观，eslint只能检查js代码，prettier可以检查的文件类型更广

prettier使用步骤

1、安装prettier

npm i -D prettier

2、创建.prettierrc.json配置文件，配置规则，常见规则如下

{
    // 一行最多多少个字符
    printWidth: 150,
    // 指定每个缩进级别的空格数
    tabWidth: 2,
    // 使用制表符而不是空格缩进行
    useTabs: true,
    // 在语句末尾打印分号
    semi: true,
    // 使用单引号而不是双引号
    singleQuote: true,
    // 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
    quoteProps: 'as-needed',
    // 在JSX中使用单引号而不是双引号
    jsxSingleQuote: false,
    // 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
    trailingComma: 'es5',
    // 在对象文字中的括号之间打印空格
    bracketSpacing: true,
    // jsx 标签的反尖括号需要换行
    jsxBracketSameLine: false,
    // 在jsx中把'>' 是否单独放一行
    bracketSameLine: false,
    // 在单独的箭头函数参数周围包括括号 always：(x) => x \ avoid：x => x
    arrowParens: 'always',
    // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
    rangeStart: 0,
    rangeEnd: Infinity,
    // 指定要使用的解析器，不需要写文件开头的 @prettier
    requirePragma: false,
    // 不需要自动在文件开头插入 @prettier
    insertPragma: false,
    // 使用默认的折行标准 always\never\preserve
    proseWrap: 'preserve',
    // 指定HTML文件的全局空格敏感度 css\strict\ignore
    htmlWhitespaceSensitivity: 'css',
    // Vue文件脚本和样式标签缩进
    vueIndentScriptAndStyle: false,
    // 换行符
    endOfLine: 'auto',
}

3、使用prettier格式化文件

npx prettier --write src/**

eslint与prettier搭配使用

使用eslint-plugin-prettier插件可以将prettier当作eslint的插件注入到eslint，让eslint可以报prettier的错，也就是将preitter的规则转为eslint的规则，eslint可以报prettier的错，也可修复这些错。

eslint-plugin-prettier的使用步骤

1、安装eslint-plugin-prettier插件

npm i -D eslint-plugin-prettier

2、在eslint配置文件中添加以下配置

{
 "plugins":["prettier"],
 "rules":{
    "prettier/prettier":"error"
  }
}

eslint-config-prettier解决eslint与prettier的冲突

因为eslint的extends会使用eslint/recommend的规则，可能会和prettier产生冲突。该依赖会使extends数组前面的可能与prettier存在冲突的规则失效，并使用prettier的规则。注意：只能解决extends中的冲突，并不能解决rules冲突，rules中的规则需要一直，或者只写prettier的规则，使用eslint-plugin-prettier插件转换为eslint规则即可。

1、安装eslint-config-prettier

npm i -D eslint-config-prettier

2、在eslint配置文件添加以下配置

"extends": ["eslint:recommended","prettier"]