ESLint 配置 Prettier 使用教程

ESLint 配置 Prettier 使用教程

eslint-config-prettiereslint-config-prettier for vue-cli项目地址:https://gitcode.com/gh_mirrors/esl/eslint-config-prettier

项目介绍

eslint-config-prettier 是一个开源项目，旨在通过关闭所有与 Prettier 格式化规则冲突的 ESLint 规则，从而使 ESLint 和 Prettier 能够协同工作。这样，开发者可以在保持代码风格一致性的同时，利用 ESLint 进行代码质量检查。

项目快速启动

安装依赖

首先，确保你已经安装了 eslint 和 prettier。然后安装 eslint-config-prettier：

npm install --save-dev eslint-config-prettier

配置 ESLint

在你的 ESLint 配置文件中（例如 .eslintrc.js），添加 prettier 到 extends 数组的最后：

module.exports = {
  extends: [
    'some-other-config-you-use',
    'prettier'
  ],
};

验证配置

运行以下命令来验证是否存在冲突的规则：

npx eslint-config-prettier index.js

应用案例和最佳实践

结合 TypeScript

如果你使用 TypeScript，可以结合 @typescript-eslint/eslint-plugin 和 eslint-config-prettier：

module.exports = {
  extends: [
    'plugin:@typescript-eslint/recommended',
    'prettier'
  ],
};

结合 React

对于 React 项目，可以结合 eslint-plugin-react 和 eslint-config-prettier：

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

典型生态项目

Prettier

prettier 是一个代码格式化工具，支持多种语言和框架，通过统一的代码风格提升代码的可读性和维护性。

ESLint

eslint 是一个静态代码分析工具，可以帮助发现代码中的问题，并强制执行编码规范。

eslint-plugin-prettier

eslint-plugin-prettier 是一个 ESLint 插件，将 Prettier 作为 ESLint 规则运行，并将差异报告为单个 ESLint 问题。

通过这些工具的结合使用，可以确保代码风格的一致性，并提高代码质量。

eslint-config-prettiereslint-config-prettier for vue-cli项目地址:https://gitcode.com/gh_mirrors/esl/eslint-config-prettier