项目搭建时的代码规范（editorconfig、Prettier、ESLint）

CssHero

已于 2024-03-11 14:12:33 修改

阅读量1.2k

点赞数 42

文章标签：代码规范 vue react typescript javascript 前端

于 2024-02-17 13:45:06 首次发布

本文链接：https://blog.csdn.net/CssHero/article/details/136136289

版权

文章目录

概要

在做项目时，如果是多人开发很容易由于代码风格的不同导致代码很影响观感，例如：有时候用双引号有时候用单引号等等，因此本文提供三个代码规范的做法，三个方法可同时使用

整体流程

1.创建完成项目后
2.配置editorconfig文件
3.使用Prettier工具
4.使用ESLint检测

使用方法

- 集成editorconfig配置

EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。
使用
- 在使用时，VSCode需要安装一个插件：EditorConfig for VS Code
- 在工作目录下创建.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

- 使用Prettier工具

Prettier用于代码格式化工具，前端能用到的文件格式它都可以搞定，是当下最流行的代码格式化工具。

使用：

1.安装prettier，如果创建vue项目时，已经选择Prettier则可以不用下载

npm install prettier -D

2.配置.prettierrc文件：

useTabs：使用tab缩进还是空格缩进，选择false；
tabWidth：tab是空格的情况下，是几个空格，选择2个；
printWidth：当行字符的长度，推荐80，也有人喜欢100或者120；
singleQuote：使用单引号还是双引号，选择true，使用单引号；
trailingComma：在多行输入的尾逗号是否添加，设置为 none，比如对象类型的最后一个属性后面是否加一个，；
semi：语句末尾是否要加分号，默认值true，选择false表示不加；

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false
}

3.VSCode需要安装prettier的插件
在这里插入图片描述
5.VSCod中的配置

点击鼠标右键后，点击使用…格式化文档
将格式化默认值为Prettier即可，使用shit+alt+F就可以格式化代码

- 使用ESLint检测

1.在前面创建项目时选择了ESLint，Vue会默认帮助我们配置需要的ESLint环境。
使用：
1.插件安装
在这里插入图片描述
2.npm下载所需插件

npm install eslint-plugin-prettier eslint-config-prettier -D

3.添加prettier插件

  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier/skip-formatting',
    'plugin:prettier/recommended'
  ]