大厂前端编码规范及ESLint和Prettier安装配置

为什么需要编程规范？

编程规范是一组旨在统一代码风格、提高代码可读性和可维护性的准则和规则。它们对于团队协作、代码质量的保证以及项目长期维护都非常重要。以下是为什么需要编程规范的一些主要原因：

1）统一风格和格式：编程规范确保团队成员编写的代码风格一致，统一的格式可以使代码更易于阅读和理解，提高团队的工作效率。

2）降低错误率：通过编程规范可以减少代码错误和潜在的 bug。一致的编程风格有助于识别和修复潜在的问题，提高代码质量。

3）提高可维护性：符合编程规范的代码更易于维护和修改。一致的命名约定、代码结构和注释规范使得开发者更容易理解代码，从而更容易进行代码维护和重构。

4）减少代码审查时间：通过编程规范，代码审查过程更加高效。审查者可以专注于代码的逻辑和功能，而不是在风格和格式上浪费时间。

5）提高代码的可移植性和兼容性：符合编程规范的代码更容易在不同的环境和平台上运行，并且更具有可移植性和兼容性。

ESLint是什么？

ESLint 是 2013年6月 创建的一个开源项目，它的目标非常简单，只有一个，那就是提供一个插件化的 javascript 代码检查工具，主要目的就是帮助开发者发现和修复代码中的错误、规范代码风格以及避免常见的代码陷阱。

具体来说，ESLint作用：

1）代码规范检查：ESLint可以对JavaScript或者TypeScript代码进行静态分析，检查代码中的语法错误、不规范的代码风格、潜在的错误等。比如未使用的变量和函数、未定义的变量、不安全的全局变量的使用、错误的变量作用域等这些问题。

2）代码格式化：通过配置规则集，可以约束代码的书写风格，例如缩进、命名、空格、分号等。

在项目中，包含一个 .eslintrc.js 文件，这个文件就是 eslint 的配置文件。

随着大家对代码格式的规范性越来越重视，eslint 也逐渐被更多的人所接收，同时也有很多大厂在原有的 eslint 规则基础之上进行了一些延伸。

Prettier是什么？

1）一个专门用于代码格式化工具，可以根据一组预定义的规则对代码进行格式化，是代码的风格统一，易于阅读。

2）Prettier的规则集相对固定、不像ESLint那样灵活的定制，不会收到个人习惯的影响。

3）在保存时，可以通过一些简单的配置让代码直接符合 ESLint 标准。

具体配置流程如下：

1）vscode中安装ESLint和Prettier扩展：

2）修改vscode设置为保存自动格式化：

3）修改vscode设置为一个tab等于两个空格：

4）创建vue项目时选择引入ESLint和Prettier：

5）ESLint配置文件如下：

6）ESLint配置代码如下：

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  // 表示当前目录即为根目录，ESLint 规则将被限制到该目录下
  root: true,
  // env 表示启用 ESLint 检测的环境
  env: {
    // 在 node 环境下启动 ESLint 检测
    node: true
  },
  // ESLint 中基础配置需要继承的配置
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier/skip-formatting'
  ],
  // 解析器
  parserOptions: {
    ecmaVersion: 'latest'
  },
  // 启用的规则及其各自的错误级别
  /**
   * 错误级别分为三种：
   * "off" 或 0 - 关闭规则
   * "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
   * "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
   */
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    // 解决与prettier插件规则冲突
    'space-before-function-paren': 'off'
  }
}

7）Prettier配置文件如下：

8）Prettier配置代码如下：

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "none"
}