The original link www.robinwieruch.de/prettier-es…

For my own project, the default is Prettier + ESLint. Prettier automatically compiles into a fixed code format, while Eslint ensures that code is formatted correctly. Here’s how Prettier and Eslint can be used together.

advantage

As mentioned earlier, while Prettier handles your code format, ESLint handles your code style. If you set Prettier, you can configure it to format the file when you save it, so you never have to worry about code formatting again. Because Prettier is highly integrated, you can only do small things. ESLint, on the other hand, doesn’t automatically perform code style fixes, but instead warns you of problems with your code style. For example, you might import something from another file, but you won’t use the content imported from the current file. ESLint will warn you about unused imports. Compared to Prettier, ESLint is highly configurable because it has no pre-configured rules. Once ESLint is installed, you can configure it yourself, or use one of several pre-configured ESLint configurations (such as the Airbnb Style Guide) to get a fixed code style regardless of your own code style.

use

First, make sure Prettier and ESLint are installed. You can install them on a per-project basis or install them globally using NPM install -g prettier esLint. I like to install them globally because I use them in every project so I don’t need to install them for every project. However, if you are working on a project as a team, it makes sense to install it in a standalone project.

Note: If you install ESLint globally once, you still need to run it on the project’s command lineeslint --init. It gives you installation prompts on the command line to step through the dynamic ESLint configuration project by project. In addition, it provides a local installation of ESLint for your project. If you want to learn more about ESLint and its configuration, visitThis ESLint tutorial without having to worry about parts of Webpack.

Next, install Prettier and ESLint extensions/plug-ins for an editor or IDE. For example, in VSCode, you can find Prettier and ESLint in their extensions.

NPM install –save-dev eslint-config-prettier eslint-plugin-prettier NPM install –save-dev eslint-config-prettier eslint-plugin-prettier NPM install –save-dev eslint-config-prettier eslint-plugin-prettier The former shuts down all ESLint rules that might conflict with Prettier, while the latter integrates Prettier into ESLint rules.

Finally, set the Prettier rule in the ESLint configuration. Therefore, create the.eslintrc.json file in the root directory of your project and provide it with the following configuration:

{
  "extends": ["prettier"]."plugins": ["prettier"]."rules": {
    "prettier/prettier": ["error"]}}Copy the code

Now you are ready to use Prettier and ESLint in your project without worrying about any conflicts. ESLint knows all Prettier rules by integrating all the rules it enforces and removing any rules that might conflict with Prettier. There shouldn’t be any way to improve the style and structure of the code. If you need to exclude folders/files from ESLint rules, you can add them to.eslintignore files (for example, node_modules / *).

configuration

As mentioned earlier, Prettier and ESLint can be configured to some extent (Prettier has few configuration options, but ESLint has more). For example, the previous tutorial on setting Prettier in VSCode showed you how to set Prettier so that it is formatted when you save a file and use the following configuration in the. Prettierrc file in the root directory of your project:

{
  "semi": true."trailingComma": "all"."singleQuote": true."printWidth": 70}Copy the code

Prettier makes sure trailing semicolons and commas are enforced, only single quotes are used, and the line length is set to a given number of characters. ESLint, by contrast, requires you to customize a lot of configuration because it is not as highly integrated as Prettier. So instead of adding all the ESLint rules ourselves, we can use the most popular JavaScript code style guides published by Airbnb. You can install it using all of its dependencies: NPX install-peerdeps –dev eslint-config-airbnb. Then, integrate it into the.eslintrc.json file:

{
  "extends": ["airbnb"."prettier"]."plugins": ["prettier"]."rules": {
    "prettier/prettier": ["error"]}}Copy the code

Prettier and ESLint both configuration files for Prettier and ESLint can be adjusted to suit your needs. If you need to add rules, you can use these files. If you need to disable rules from the Airbnb style guide, you can do so in the ESLint configuration.

Integrating Prettier in VS Code