使用 ESLint 和 Prettier 避免不必要占用代码行数的空格和换行符

在前端开发过程中，代码风格的一致性是非常重要的。好的代码风格可以让代码更加易读易维护，提高代码质量和开发效率。但是，在大型项目中，往往会出现不同开发者的代码风格差异，造成代码的难以协作。为了解决这个问题，我们可以引入 ESLint 和 Prettier 工具来规范代码格式。

什么是 ESLint 和 Prettier？

ESLint 是一个 JavaScript 代码检测工具。它能帮助我们检测代码中的语法错误、代码格式问题、潜在 Bug 等问题，可以大大提高代码质量。

Prettier 是一个代码格式化工具。它能自动识别代码中的格式问题，并进行自动修复，帮助我们确保代码的一致性。

如何使用 ESLint 和 Prettier？

首先，我们需要在项目中安装两个工具：

npm install -D eslint prettier

安装完毕后，需要创建一个配置文件 .eslintrc.js：

// www.javascriptcn.com code example
module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: ['eslint:recommended', 'plugin:prettier/recommended'],
  plugins: ['prettier'],
  rules: {},
};

其中，'eslint:recommended' 和 'plugin:prettier/recommended' 两个扩展分别引入了 ESLint 和 Prettier 的默认规则集。

接着，我们需要安装一些用于适配 ESLint 和 Prettier 的规则：

npm install -D eslint-config-prettier eslint-plugin-prettier

在配置文件中添加以下内容：

// www.javascriptcn.com code example
module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: ['eslint:recommended', 'plugin:prettier/recommended'],
  plugins: ['prettier'],
  rules: {
    // 禁止使用 console
    'no-console': 'error',
    // 禁止使用 alert
    'no-alert': 'error',
    // 禁止使用 debugger
    'no-debugger': 'error',
    // 行末加分号
    semi: ['error', 'always'],
    // 使用单引号
    quotes: ['error', 'single'],
    // 缩进使用 2 个空格
    indent: ['error', 2],
    // 不允许有未使用的变量和声明的变量未被读取
    'no-unused-vars': 'error',
    // 函数名后不需要空格
    'space-before-function-paren': ['error', 'never'],
    // 对象字面量中冒号前不要空格，冒号后要空格
    'key-spacing': [
      'error',
      {
        beforeColon: false,
        afterColon: true,
      },
    ],
    // 不要有多余的空行
    'no-multiple-empty-lines': ['error', { max: 1 }],
    // 操作符周围要有空格
    'space-infix-ops': 'error',
    // 换行符统一使用 LF。这里只检查了.js 和 .jsx 文件，如果是其他类型的文件也需要添加
    'linebreak-style': ['error', 'unix'],
    // Prettier 配置
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto',
      },
    ],
  },
};

最后，我们需要在 package.json 文件中添加一些脚本：

// www.javascriptcn.com code example
{
  "scripts": {
    "lint": "eslint **/*.js",
    "prettier": "prettier '**/*.js' --write",
    "precommit": "lint-staged",
  },
  "lint-staged": {
    "**/*.js": ["npm run lint", "npm run prettier"]
  }
}

其中，"lint" 脚本用于检测代码，"prettier" 脚本用于格式化代码，"precommit" 脚本用于在提交代码前进行代码检测和格式化。

现在，我们就可以在代码中愉快地使用 ESLint 和 Prettier 来规范代码格式了！

结语

通过使用 ESLint 和 Prettier，我们可以避免不必要的代码行数占用问题，提高代码的可读性和维护性。在大型项目中，代码格式的一致性非常重要，使用这两个工具可以帮助我们更加方便地进行代码协作和维护。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d677aaa941bf7134c3bf70