Enforcing JavaScript Code Quality with ESLint and Prettier

In front-end development, using ESLint and Prettier can improve code quality and consistency. ESLint is used to detect code problems and regulate styles, and Prettier is responsible for automatically formatting the code. 1. Install ESLint and initialize the configuration through npx eslint --init; 2. Configure the .eslintrc.js file, select the environment, framework, and code style, and customize the rules; 3. Install Prettier and its plug-ins, modify the ESLint configuration to avoid rule conflicts; 4. Create .prettierrc file to customize formatting rules; 5. Install plug-ins in the editor (such as VS Code) and enable automatic formatting when saving; 6. Pay attention to rule conflicts, team unification, performance impact, and CI integration. The combination of the two can effectively reduce low-level errors and improve collaboration efficiency.

In front-end development, maintaining code quality and consistency is the key to team collaboration and long-term project maintenance. ESLint and Prettier are two very practical tools that can help us automatically check and format JavaScript code. Let’s take a look at how to use these two tools well.

Why do you need ESLint and Prettier?

JavaScript is a flexible but easy-to-write language. Different developers have different coding habits, such as indentation, quotation marks, variable naming, etc. ESLint detects potential problems and regulates code styles, while Prettier focuses on automatically formatting code. Using the two together can greatly improve code readability and reduce low-level errors.

How to install and configure ESLint

To get started with ESLint, first install it in your project:

 npm install eslint --save-dev

Then initialize the configuration file:

 npx eslint --init

This will lead you to select basic configurations, such as which scripting environment you want to use (such as browser or Node.js), whether to use frameworks (such as React), and which code style you prefer (such as Airbnb or Standard).

Common .eslintrc.js configurations may include:

 module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'airbnb',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2020,
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {
    // Custom rule 'no-console': ['warn'],
  },
};

You can adjust rules based on team needs, such as closing some too-strict restrictions, or adding more security checks.

How to integrate Prettier for code formatting

Install the necessary dependencies first:

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

Then modify the extends field of ESLint to ensure that rules that conflict with Prettier are disabled:

 extends: [
  'airbnb',
  'prettier' // Close ESLint rules that conflict with Prettier],
plugins: ['prettier'],
rules: {
  'prettier/prettier': ['error'] // Handle Prettier's format errors as ESLint errors}

You can also create a .prettierrc file to customize the formatting rules:

 {
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80
}

In this way, every time ESLint is run, Prettier will work together to ensure the unified code style.

How to check and format code in real time in the editor

Most modern editors such as VS Code support ESLint and Prettier plugins. After installing the following plug-ins:

• ESLint
• Prettier - Code formatter

Set the default formatting tool to Prettier and enable the automatic formatting function when saving:

 "editor.formatOnSave": true,
"prettier.requireConfig": true,
"eslint.enable": true

In this way, you can see error prompts in real time when writing code, and automatically format them when saving, saving, saving time to manually adjust.

Frequently Asked Questions and Notes

• Rule conflict : If ESLint and Prettier rules conflict, remember to use eslint-config-prettier to close the conflict item.
• Team Unification : Add configuration files to version control (such as Git) to ensure that all members use the same rules.
• Performance Impact : Strict inspections may be slower when starting large projects, and you may consider running only when saving or committing.
• Used in CI : ESLint checks can be added to the CI process to prevent irregular code from being merged.

Basically that's it. The configuration is not complicated, but it can indeed help you avoid many low-level mistakes and style controversies.

The above is the detailed content of Enforcing JavaScript Code Quality with ESLint and Prettier. For more information, please follow other related articles on the PHP Chinese website!