前端项目代码规范：ESLint和Prettier的配置与管理

在近期的前端项目整改过程中，我们遇到了一个棘手的问题。尽管团队成员都致力于提升代码质量，但每个人的编码风俗迥异，这导致了代码格式化风格的不一致。不知道大家有没有遇到过这样的问题：原本只需添加一行代码来修复一个问题，却在下载项目后发现，当地代码格式化工具对整个文件进行了大规模的调解。效果，原本几行的改动在提交时酿成了数百行的变动，这无疑增加了代码检视的工作量。
  为相识决这一问题，我们决定在项目中推行统一的代码规范。那么，怎样确保团队成员的代码格式保持一致呢？
  办理方法

  什么是 ESLint

  想象一下，ESLint就像是一个严格的老师，它会告诉你哪里的代码写得不够好，哪里可以改进。这是一个开源的 JavaScript 代码检测工具，自从2013年它出现以来，它就成为了JavaScript开发者的好伙伴。它的焦点使命是提供一个可以定制的查抄体系，让你可以大概根据本身的喜好来设定规则，保证你的代码既规范又统一。
  怎样在项目中使用 ESLint？

  当你开始一个新的前端项目，好比用React、Vue或Angular，你大概会在项目里找到一个叫做.eslintrc.js的文件。这个文件就像是你的代码规则手册，告诉你哪些代码是好的，哪些必要改进。随着大家对代码质量的重视，ESLint变得越来越流行，很多大公司以致在标准规则上做了更多的定制。
  选择 ESLint 规则

  在使用vue-cli创建vue项目的时候，我们可以在那边。创建项目时，好比，你可以选择一个只关注错误的根本规则集，或者采用像Airbnb或Standard这样的流行规则集。这些规则集就像是一套指南，资助你写出既规范又一致的代码。

1. ? Pick a linter / formatter config:
2.   ESLint with error prevention only // 只关注错误的ESLint
3.   ESLint + Airbnb config // 使用Airbnb的规则集
4.   ESLint + Standard config // 使用标准的规则集

复制代码

假设创建项目的时候选择了 标准的ESLint规则，我们打开项目中的.eslintrc.js文件，修改相干配置信息

1.     // ESLint 配置文件遵循 commonJS 的导出规则，所导出的对象就是 ESLint 的配置对象
2.     // 文档：https://eslint.bootcss.com/docs/user-guide/configuring
3.     module.exports = {
4.       // 表示当前目录即为根目录，ESLint 规则将被限制到该目录下
5.       root: true,
6.       // env 表示启用 ESLint 检测的环境
7.       env: {
8.         // 在 node 环境下启动 ESLint 检测
9.         node: true
10.       },
11.       // ESLint 中基础配置需要继承的配置
12.       extends: ["plugin:vue/vue3-essential", "@vue/standard"],
13.       // 解析器
14.       parserOptions: {
15.         parser: "@babel/eslint-parser"
16.       },
17.       // 需要修改的启用规则及其各自的错误级别
18.       /**
19.        * 错误级别分为三种：
20.        * "off" 或 0 - 关闭规则
21.        * "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
22.        * "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
23.        */
24.       rules: {
25.         "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
26.         "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
27.       }
28.     };

复制代码

如今，我们已经相识了.eslintrc.js文件的根本概念。如果代码不符合规则，ESLint会告诉你哪里出了问题。好比，你大概必要把Home.vue文件中的name属性的值从单引号改为双引号。每当你保存代码时，ESLint都会查抄并指出问题。
  
  

   这个错误信息重要是 13:9 error Strings must use singlequote quotes，表示：
  

• 1. 此时我们触发了一个error（错误）级别的错误 《错误级别的错误》
  
• 2. 触发该错误的位置在 HomeView.vue 的第13行第9列中
  
• 3. 错误形貌为：字符串必须使用单引号
  
• 4. 错误规则为：quotes
  
• 
  要办理这个问题，你通常有两个选择：
  
• 1. 按照 ESLint 的要求修改代码
  
• 2. 修改 ESLint 的规则
  
• 按照 ESLint 的要求修改代码：
  在 HomeView.vue 的第 13 行中把双引号改为单引号
  修改 ESLint 的规则：
  在 .eslintrc.js 文件中，新增一条验证规则："quotes": "warn"。quotes默认值为error。warn表示警告，也可以改为off，表示不校验
  
  1. "quotes": "error" // 默认值，错误提示，会终止程序执行
  2. "quotes": "warn" // 警告提示，不会终止程序执行
  3. "quotes": "off" // 关闭规则校验

  复制代码
  代码格式化利器：Prettier
  
  Prettier 是一个流行的代码格式化工具，它的目的是让你的代码看起来更加整齐和一致。Prettier 的焦点理念是“故意见的代码格式化”，这意味着它会为你的代码提供一种统一的、经过经心计划的格式，而不是让你在配置文件中指定复杂的规则。
  Prettier 的特点：
  
• 1. 开箱即用：Prettier 提供了一套默认的格式化规则，你无需进行任何配置就可以开始使用。
  
• 2. 集成友好：Prettier 可以轻松集成到各种编辑器和IDE中，如 Visual Studio Code、Sublime Text、Atom 等，以及很多流行的构建工具和持续集成体系。
  
• 3. 保存时格式化：很多编辑器支持在保存文件时自动运行 Prettier，这样可以确保每次提交的代码都是格式化过的。
  
• 4. 支持多种语言：Prettier 支持多种编程语言的格式化，包罗 JavaScript、CSS、HTML、Vue、TypeScript 等。
  
• 5. 插件和配置：虽然 Prettier 默认提供了一套规则，但它也允许你通过 .prettierrc 文件来自界说规则，以适应特定的项目需求。
  
• 6. 与ESLint协同工作：Prettier 可以与 ESLint 一起使用，它们可以共存并相互增补，资助你维护代码的质量和一致性。
  
• 怎样让ESLint和Prettier携手合作？
  
  1、在 VSCode 中安装 prettier 插件（搜索 prettier），这个插件可以资助我们在配置 prettier 的时候得到提示
  
  
  
  
  2、在项目中新建 .prettierrc 文件，这是Prettier的默认配置文件，内容如下：
  
  1. {
  2.   "semi": false, // 不使用分号
  3.   "singleQuote": true, // 使用单引号
  4.   "trailingComma": "none" // 多行语句的末尾不加逗号
  5. }

  复制代码
  3、打开 VSCode 设置，启用“保存时格式化”功能。
  
  
  
  
  4、在设置中，搜索 save ，勾选 Format On Save
  
  
  
  
  5、在这里Format On Save Mode有三种方式，默认是对整个文件进行格式化，我们可以根据本身的需求选择差别的模式，我这里选择file。
  
• • file：设置整个文件的格式。
  
• • modifications：格式修改(必要源代码管理)
  
• • modificationsIfAvailable：将实行只对修改进行格式化必要源代码管理）。如果无法使用源代码管理，则将格式化整个文件。
  
• 三、如果ESLint和Prettier在某些规则上有冲突，。好比方法名和背面的括号之间的空格问题。ESLint 规则是添加空格，Prettier则是不添加空格
  
  
  
  
  
  此时可以考虑在ESlint配置文件中关闭相干检测规则。
  1、打开 .eslintrc.js 配置文件
  2、在 rules 规则下，新增一条规则
  
  1. 'space-before-function-paren': 'off'

  复制代码
  3、重启项目
  至此，你即可在 VSCode 保存时，自动格式化代码！
  其他常见问题
  
  一、VSCode 而言，默认一个 tab 等于 4 个空格，而 ESLint 盼望一个 tab 为两个空格
  
  打开设置界面，找到Tab Size，修改值为2
  
  
  
  
  二、如果 VSCode 中存在多个代码格式化工具，出现格式化冲突的问题
  
  1、此时在代码编辑区点击鼠标右键，然后选择【使用…格式化文档】
  
  
  
  
  2、在上方弹出框中选择Prettier
  
  
  
  
  

      
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。