vscode 统一格式化和eslint配置

步骤：

1、安装并启用插件：editorConfig、prettier、eslint

2、安装所需依赖

3、在项目里配置vscode设置文件

4、在项目里配置editor、prettier、eslint

5、查看配置是否生效：在package.json里配置命令eslint --ext .js,.vue src --fix，然后跑一下，把整个项目自动格式化修复一遍，在编辑器终端里会有错误及警告，并且保存的时候会自动修复部分问题

npm run lint-fix

---

第一步：安装所需依赖，建议不熟悉eslint配置的人，先使用一下版本

"babel-eslint":
"10.0.3"
"eslint":
"^7.32.0"
"eslint-config-prettier":"^8.5.0"
"eslint-config-standard":
^14.1.1"
"eslint-friendly-formatter":
"^4.0.1"
"eslint-plugin-import":
"^2.25,4"
"eslint-plugin-node":
^11.1.0"
"eslint-plugin-prettier":
"^4,2.1"
"eslint-plugin-promise":
"^4,3.1"
"eslint-plugin-standard":
"^5.0.0"
"eslint-plugin-vue":
"^9, 6.g"

npm i -D babel-eslint@10.0.3 eslint@7.32.0 eslint-config-prettier@8.5.0 eslint-config-standard@14.1.1 eslint-friendly-formatter@4.0.1 eslint-plugin-import@2.25.4 eslint-plugin-node@11.1.0 eslint-plugin-prettier@4.2.1 eslint-plugin-promise@4.3.1 eslint-plugin-standard@5.0.0 eslint-plugin-vue@9.6.0 prettier

---

第二步VSCode 配置

注意：不要把配置文件加入到 gitignore

.vscode/settings.json

{
  // 保存时格式化
  "editor.formatOnSave": true,
  // 保存时候按eslint规则进行修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.format.enable": true, // 启用ESLint作为已验证文件的格式化程序
  "vetur.validation.script": false // 禁用vetur的校验
}

---

第三步：配置文件

EditorConfig 规则

.editorconfig

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

Prettier 规则

.prettierrc

{
  "printWidth": 120,
  "semi": false,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "trailingComma": "es5",
  "endOfLine": "lf"
}

ESlint 与 Prettier 可能会冲突，故需做如下设置：

// 1. 安装依赖
npm install -D eslint-config-prettier eslint-plugin-prettier
// 2. 配置.eslintrc文件,在下面的.eslintrc.json文件中已经加入，第二条可忽略
{
  "extends": ["plugin:prettier/recommended"]
}
// 这个配置包含两个内容：
// 使用eslint-config-prettier来关掉eslint中所有与prettier冲突的配置。
// 使用eslint-plugin-prettier将prettier的rules以插件的形式加入到ESlint里面。

.prettierignore

/dist/*
/node_modules/*
/static/*
/public/*
/*-lock.json
.DS_Store

Eslint 规则

.eslintrc.json

{
  "root": true,
  // 环境：可以使用的全局变量，比如browser环境的window。可配置多个，不互斥。
  "env": {
    "browser": true,
    "commonjs": true,
    "node": true,
    "es2021": true
  },
  // 扩展风格：使用standard风格，同时适配vue推荐规则、prettier规则
  "extends": [
    "standard",
    "plugin:vue/recommended",
    "plugin:prettier/recommended"
  ],
  // 解析器：支持解析的语法
  "parserOptions": {
    // @babel/eslint-parser
    "parser": "babel-eslint",
    "sourceType": "module",
   // "ecmaVersion": "latest",
   "ecmaVersion": 2017,
   "ecmaFeatures": {  
   "legacyDecorators": true  
   }  
  },
  // 全局变量：比如jquery的$
  "globals": {},
  // 插件：比如jquery的$
  "plugins": [],
  // "off" 或 0 - 关闭规则
  // "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
  // "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
  "rules": {
    "space-before-function-paren": 0,
    "camelcase": 0,
    "vue/attribute-hyphenation": 0,
    "vue/multi-word-component-names": 0
  }
}

.eslintignore

/dist/*
/node_modules/*
/static/*
/public/*
/*-lock.json
.DS_Store

关闭当前行的代码语法检测

// 1：关闭当前行的检测
some code // eslint-disable-line

// 2：针对当前行的某一具体规则禁用eslint检查
some code // eslint-disable-line no-alert

全局格式化

prettier --write .

"prettier": "prettier --write ."

---

行尾字符冲突解决方式

windows系统拉取格式化后的代码，可能会碰到行尾字符冲突的问题，需要做以下配置：1、git全局配置命令：git config --global core.autocrlf false2、在vscode设置里把eol设置为\n

然后再重新拉取代码，应该就没问题了。

拓展

eslint是什么？

ESLint 是一个用于识别和报告 JavaScript 代码中问题的工具，旨在帮助开发者编写一致且无错误的代码。它通过静态分析代码来查找潜在的问题，如语法错误、不规范的编码风格以及可能引起问题的编程模式。以下是关于 ESLint 的一些关键点：

主要功能

• 代码质量检查：检测代码中的常见错误和不符合最佳实践的地方。
• 编码风格一致性：强制执行统一的代码格式和风格规则，减少团队成员之间代码风格差异带来的困扰。
• 安全性和性能优化建议：部分规则可以指出可能的安全漏洞或性能瓶颈。
• 插件扩展性：支持丰富的插件生态系统，允许用户根据项目需求添加特定语言特性（如 React, Vue 等）的支持或者自定义规则。

使用场景

• 个人开发：确保自己的代码符合一定的标准，提高可读性和维护性。
• 团队协作：在多人协作环境中保持代码风格的一致性，简化代码审查过程。
• 持续集成/持续部署 (CI/CD)：作为构建流程的一部分，在每次提交时自动运行 ESLint 来保证代码质量。

安装与配置

1. 安装 ESLint：可以通过 npm 或 yarn 全局安装或本地安装到项目中。

   npm install eslint --save-dev
   # 或者
   yarn add eslint --dev

2. 初始化配置文件：运行 eslint --init 命令，按照提示选择适合项目的预设规则集或手动配置。

3. 编辑 .eslintrc 文件：这个 JSON 或 YAML 格式的文件包含了 ESLint 的配置选项，包括启用哪些规则、环境设置等。

4. 运行 ESLint：可以在命令行中直接调用 eslint 来检查指定文件或目录下的代码，也可以将其集成到编辑器或 IDE 中实现实时反馈。

5. 修复问题：对于某些简单的样式问题，ESLint 提供了自动修复的功能，可以通过 --fix 参数尝试自动修正代码。

规则管理

ESLint 内置了大量的规则，但你也可以通过安装额外的插件来增加更多规则。每个规则都有三个状态之一：关闭 (off)、警告 (warn) 和 错误 (error)。可以根据项目的具体要求调整这些规则的严格程度。

集成开发环境 (IDE) 支持

大多数现代的 IDE 和文本编辑器（如 Visual Studio Code, WebStorm, Sublime Text 等）都提供了对 ESLint 的良好支持，通常只需要安装相应的插件即可实现无缝集成。

总之，ESLint 是一个强大的工具，可以帮助开发者维持高质量的 JavaScript 代码库，并促进良好的编码习惯。随着 JavaScript 生态系统的不断发展，ESLint 也在持续更新以适应新的语言特性和社区标准。

web前端统一格式化和eslint配置的必要性？

在Web前端开发中，统一代码格式化和配置 ESLint 是非常必要的，这不仅有助于提高代码质量，还能显著改善团队协作效率。以下是具体的原因：

1. 提高代码可读性和维护性

• 一致性：当所有开发者遵循相同的代码风格时，代码变得更加一致，易于阅读和理解。无论是新加入的成员还是外部贡献者，都能快速上手项目。
• 减少噪音：统一的格式减少了不必要的差异（如缩进、空格等），使得代码审查更加专注于逻辑层面而非样式问题。

2. 自动化代码质量检查

• 早期发现问题：ESLint 可以静态分析代码，提前捕捉潜在的语法错误、不规范的编码习惯以及可能的安全隐患，从而避免这些问题进入生产环境。
• 强制最佳实践：通过配置 ESLint 规则，可以确保团队始终遵循行业内的最佳实践，例如使用严格模式、避免全局变量污染等。

3. 提升团队协作效率

• 简化代码审查：统一的格式和规则意味着评审者可以更专注于代码的功能实现，而不是纠结于个人偏好的代码风格。
• 加速新人融入：对于刚加入团队的新成员来说，预定义的 ESLint 配置提供了明确的指引，帮助他们更快适应项目的编码标准。

4. 促进持续集成/持续部署 (CI/CD)

• 自动构建与测试：将 ESLint 检查集成到 CI/CD 流程中，可以在每次提交或合并请求时自动运行，确保只有符合要求的代码才能进入主分支。
• 预防回归错误：长期来看，这种做法有助于保持代码库的健康状态，防止旧问题再次出现。

5. 支持多平台开发

• 跨编辑器一致性：不同的 IDE 和文本编辑器可能会有不同的默认格式设置，但通过 Prettier 或其他格式化工具配合 ESLint 使用，可以在整个团队中保持一致的代码外观。

实现方法

为了实现上述目标，通常会采取以下措施：

• 安装 ESLint 和格式化工具：例如 eslint 和 prettier，并根据项目需求选择合适的插件。
• 创建共享配置文件：如 .eslintrc.js 或 .prettierrc，定义团队认可的规则集。
• 利用编辑器扩展：大多数现代编辑器都提供对 ESLint 和 Prettier 的良好支持，安装相关插件后可以实现实时反馈。
• 集成到构建流程：将 ESLint 和格式化命令添加到 npm 脚本或 CI/CD 管道中，确保每次提交前都会进行检查。

 总之，通过引入统一的代码格式化和 ESLint 配置，Web 前端项目可以获得更高的代码质量和更好的团队协作体验。这是一项长期投资，随着时间的推移，其收益会在项目的稳定性和开发效率上体现出来。