集成 EditorConfig 配置

官网 ： https://editorconfig.org

EditorConfig 有助于在不同的编辑器和 IDE 之间为从事同一项目的多个开发人员维护一致的编码风格。

在项目根目录创建 .editorconfig 文件

#.editorconfig

# 最顶层EditorConfig文件
root = true

[*]
# 字符集编码
charset = utf-8
# 缩进风格
indent_style = space
# 缩进大小
indent_size = 2
# 行最大长度
max_line_length = 80
# 换行类型（cr | lf | crlf）
end_of_line = lf
# 去除行首空白字符
trim_trailing_whitespace = true
# 文件末尾插入新行
insert_final_newline = true

# md文件适用规则
[*.md]
max_line_length = off
trim_trailing_whitespace = false
insert_final_newline = false

集成 Prettier 配置

官网 ： https://prettier.io

Prettier 是一款强大的代码格式化工具，它支持 JavaScript、JSX、Angular、Vue、Flow、 TypeScript、CSS、Less、SCSS、HTML、JSON、GraphQL、Markdown、YAML 等，是目前最流行的 代码格式化工具。 

1. 安装 Prettier 

npm i prettier -D

2. 配置 Prettier

Prettier支持多种格式的配置文件，比如：.json、.js、.yaml、.toml 等。此处进行简单配置，更多配置可至官网查看。

在项目根目录创建 .prettierrc 文件：

#.prettierrc
# 在语句末尾加分号
semi: true
# 使用单引号代替双引号
singleQuote: true
# 行最大长度
printWidth: 80

Prettier 有命令行使用方式 npx prettier --help ，也可编辑器集成。

VSCode 需安装 Prettier - Code formatter 插件

JetBrains WebStorm 无需额外安装，可直接设置使用

集成 ESLint 配置

官网 ： https://eslint.org/

ESLint是一款能够发现并自动修复JavaScript代码问题的工具。

1. 安装 ESLint

npm i eslint -D

手动配置 ESLint 略显麻烦，这里我们选择初始化命令，根据终端提示一步步操作完成，最终可手 动补充。

npx eslint --init

我们选择 To check syntax, find problems, and enforce code style（检查语法、发现问 题并强制执行代码风格）

What type of modules does your project use?（你的项目使用什么类型的模块？）

我们选择 JavaScript modules (import/export)

Which framework does your project use?（你的项目使用哪个框架？）

我们选择 Vue.js 

Does your project use TypeScript?（你的项目是否使用TypeScript？） 

我们选择 Yes

Where does your code run?（你的代码在哪里运行？）

我们选择 Browser和Node 

How would you like to define a style for your project?（你希望如何为项目定义风 格？） 

我们选择 Use a popular style guide（使用流行风格指南）

Which style guide do you want to follow?（你希望遵循哪种样式指南？）

我们选择 Airbnb: https://github.com/airbnb/javascript

ESLint 为我们列出了社区中流行的 JavaScript 风格指南，我们采用 GitHub 上 Star 最多的 Airbnb，中文翻译版 https://lin-123.github.io/javascript/。 

What format do you want your config file to be in?（你希望配置文件采用什么格 式？）

我们选择 JavaScript 

Would you like to install them now with npm?（你想现在用npm安装它们吗？） 

我们选择 Yes

出现 "Successfully created .eslintrc.js file in …" 则代表初始化配置完成

3. ESLint 配置文件 .eslintrc.js

根据实际情况，可以手动在此文件中添加额外的ESLint规则、插件等配置。

// .eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: ['plugin:vue/essential', 'airbnb-base'],
  parserOptions: {
    ecmaVersion: 13,
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {},
};

4. 使用 ESLint

ESLint 有命令行使用方式 npx eslint --help ，也可编辑器集成。

VSCode 需安装 ESLint 插件

JetBrains WebStorm 无需额外安装，可直接设置使用

解决 Prettier 和 ESLint 的冲突

安装依赖

npm i eslint-plugin-prettier eslint-config-prettier -D

// .eslintrc.js

module.exports = {
  ...
  extends: [
    ...
    'plugin:prettier/recommended',
  ],
  ...
  plugins: [..., 'prettier'],
  rules: { 'prettier/prettier': 'error' },
};