前言

说明

• eslint：代码检查插件

• prettier：代码格式化插件

• editorconfig：支持多种编辑器配置插件

vscode 插件安装

vscode 安装 editorconfig 插件

vscode 安装 eslint 插件

vscode 安装 prettier 插件

项目配置

开发依赖安装

pnpm install eslint -D

pnpm install prettier -D

代码格式配置文件

.eslintrc.js：代码格式错误检查配置

.prettierrc：代码格式化配置

{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "useTabs": false
}

.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

package.json配置eslint及prettier运行脚本

    "lint:eslint": "eslint \"src/**/*.{vue,ts,tsx}\" --fix",
    "lint:prettier": "prettier --write \"src/**/*.{vue,ts}\""

参考

1. ESLint - Pluggable JavaScript linter - ESLint中文

2. EditorConfig

3. Prettier · Opinionated Code Formatter