Lyk-Blog

十三、项目搭建之代码规范工具

2022/9/1 Vuevue项目代码规范工具Prettier代码格式化editorconfig编码风格ESlint经验总结

# 1、使用prettier工具

# 1.1.安装prettier

  • Prettier 是一款强大的代码格式化工具，支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言，基本上前端能用到的文件格式它都可以搞定，是当下最流行的代码格式化工具。

  • 安装prettier

npm install prettier -D
1

# 1.2.配置.prettierrc文件 并 进行代码格式化

相对于下面学习的 1.4.借助vscode插件完成代码格式化 的方法而言; 我们这种方法进行代码格式化稍微麻烦一点

  • useTabs：使用tab缩进还是空格缩进，选择false；
  • tabWidth：tab是空格的情况下，是几个空格，选择2个；
  • printWidth：当行字符的长度，推荐80，也有人喜欢100或者120；
  • singleQuote：使用单引号还是双引号，选择true，使用单引号；
  • trailingComma：在多行输入的尾逗号是否添加，设置为 none，比如对象类型的最后一个属性后面是否加一个，；
  • semi：语句末尾是否要加分号，默认值true，选择false表示不加；
  • .prettierrc文件配置如下：
{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false
}
1
2
3
4
5
6
7
8
  • 配置完上面的.prettierrc文件之后：在package.json中配置一个scripts：
    • 然后执行：npm run prettier 此时代码就会被格式化了 （该命令只需要配置好.prettierrc文件之后，就可执行帮助我们格式化代码；跟是否安装vscode格式化插件和是否安装prettier依赖的npm包无关）
    "prettier": "prettier --write ."
1

# 1.3.创建.prettierignore忽略文件

  • .prettierignore忽略文件配置
    • 表示这些文件将不会进行代码格式化
/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*
1
2
3
4
5
6
7
8
9

# 1.4.借助vscode插件完成代码格式化

  1. VSCode需要安装prettier的插件
    • 插件：Prettier - Code formatter
  2. 安装完插件后，对VSCode进行配置；可以直接配置setting.json文件；也可以做如下图的操作；
    • settings =>format on save => 勾选上
    • settings => editor default format => 选择 prettier
  • 直接在VSCode的setting.json文件中进行如下配置：
    • 注意：若设置需要配置文件:"prettier.requireConfig": true ; 则必须要求项目的根目录下有配置文件： .prettierrc 或 .editorconfig 中的一个 或者 两个同时存在，否则代码保存后不会进行格式化
{
  "prettier.requireConfig": true,//需要Prettier的配置文件（需要配置文件）
  "editor.formatOnSave": true,//开启保存文件自动格式化代码
  "editor.defaultFormatter": "esbenp.prettier-vscode",//定义一个默认的代码格式化工具
  //很多其他的配置...
}
1
2
3
4
5
6
  • 也可以在VSCode的设置中，进行如下图操作

1.png

  • 测试prettier是否生效；通过上面两个步骤之后
    • 我们在代码中进行保存代码就可以完成代码格式化了：即：Ctrl + S

# 1.5.补充

  • 如果在只装了Prettier - Code formatter插件；没有在项目中写配置文件：.prettierrc的情况下
    • 插件中默认会有对代码格式化的一些配置
    • 如果你想自己定义代码格式化的一些配置；可以在项目中加入配置文件：.prettierrc；对插件的一些默认配置进行覆盖
  • 注意：Prettier插件获取配置文件的优先级为：.prettierrc > .editorconfig > vscode默认配置
    • 即 .prettierrc 和 .editorconfig 配置文件同时存在，二者的内容会进行合并，若配置项有冲突，则 .prettierrc 的优先级会更高

# 2、集成editorconfig配置

  • EditorConfig 有助于为不同 IDE 编辑器（如VSCode/webstorm编辑器）上处理同一项目的多个开发人员维护一致的编码风格。
  • .editorconfig配置文件内容如下：
# http://editorconfig.org

root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行尾的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  • 注意想要该配置文件：.editorconfig 在VSCode编辑器中生效；必须安装插件：EditorConfig for VS Code

# 3、使用ESLint检测

# 3.1.如何让项目启用ESLint检测

  • 作用：在编辑阶段写代码时，如果代码不符合规范，进行错误提示
  • 在前面创建项目的时候，我们就选择了ESLint，所以Vue会默认帮助我们配置需要的ESLint环境。
    • 如默认安装了这些依赖环境：（如果没有安装，则自己手动安装未安装的）
      • "eslint": "^8.22.0" 该依赖必须安装
      • "eslint-plugin-vue": "^9.3.0" 该依赖必须安装
      • "@vue/eslint-config-prettier": "^7.0.0" 该依赖必须安装 【注意：如果你安装了并且配置了 解决eslint和prettier冲突的插件：npm包：eslint-plugin-prettier ；那么该依赖@vue/eslint-config-prettier的安装是可以不被需要的；因为该依赖提供的eslint代码检测规范的默认配置 在eslint-plugin-prettier依赖包中同样拥有】
      • "@vue/eslint-config-typescript": "^11.0.0" 该依赖看你是否使用ts开发，选择性安装
    • 项目根目录默认生成了：.eslintrc.cjs配置文件；具体默认内容如下：（没有解决eslint和prettier冲突的情况的配置如下）
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')//该配置需要安装该依赖：'@rushstack/eslint-patch'

module.exports = {
  root: true,
  'extends': [//继承的一些代码检测规范（默认配置的代码检测规范）配置下面规范前，记得安装好对应的依赖包
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    
    '@vue/eslint-config-typescript',//ts代码检测相关规范（该配置看你是否使用ts开发，选择性配置；配置前记得安装上面的依赖@vue/eslint-config-typescript）
    
    '@vue/eslint-config-prettier'// eslint代码格式化规范检测的默认配置 -(后面的配置项会覆盖前面的)
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  • 由于上面我们该装的依赖环境 和 需要配置的文件：.eslintrc.cjs；在我们创建vue项目的时候（选择了ESLint），默认帮我们做了；
  • 所以现在我们想要在VSCode里面启用ESLint检测只要安装VSCode插件：ESLint即可

# 3.2.解决eslint和prettier冲突的问题

  • 启用ESLint检测后，我们会发现一个问题；如果我们eslint代码检测的规范 和 prettier格式化的规范不一致时；会发现 我们进行代码保存（Ctrl + S）进行代码格式化后； ESLint依然会给我们提示代码不规范的信息问题； 我们该如何解决这个问题呢？
    • 提出问题：我们如何保证在 eslint代码检测规范 和 prettier格式化的规范 不同时；让他们的规范始终保持一致，从而解决冲突问题呢？
  • 我们可以让ESLint在检测代码规范时，考虑prettier格式化代码的规范；即跟prettier格式化代码的规范保持一致【即在ESLint检测代码规范时，按照prettier格式化代码规范进行检测】
    • 安装插件（项目依赖）：（vue在创建项目时，如果选择prettier，那么这两个插件会自动安装）
# 解决eslint和prettier冲突的插件依赖
npm install eslint-plugin-prettier -D
1
2
  • install好上面的插件后，我们需要对.eslintrc.cjs增加如下配置（解决了eslint和prettier冲突的情况的配置如下）最终方案配置
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    //'@vue/eslint-config-prettier', //【如果下面有配置项： 'plugin:prettier/recommended' 那么该配置可以不被需要；且之前安装的依赖包：@vue/eslint-config-prettier 可以被卸载】

    'plugin:prettier/recommended' //让ESLint进行代码检测时，遵从prettier的格式化代码规范【增加该配置】（该配置放在最后面，因为后面的配置项会覆盖前面的；）【解决prettier和ESLint的冲突问题的配置】 该配置项可配置的前提：安装eslint-plugin-prettier依赖包
  ],
  
  parserOptions: {
    ecmaVersion: 'latest'
  },
  
  rules: {//【补充内容】
    '@typescript-eslint/no-unused-vars': 'off' //关闭掉ESLint对 定义但是未使用的变量，进行的代码不规范提示
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 4、总结

  • Prettier只关注代码格式，也支持自动修复，规则和ESLint不同

  • EditorConfig 是用来抹平编辑器差异的，比如文件编码，锁进格式等

  • ESLint 关注于代码质量校验 和 代码格式校验，配合插件支持autoFix和错误提示，完全可插拔

最后更新时间: 2022/11/01, 11:56:41

一、初识TypeScript-变量声明及数据类型

彩虹
周杰伦