DEV Community

Samuel Lubliner
Samuel Lubliner

Posted on

Linting

Style Guides

Linters

Linters scan code with a set of style rules and will report any errors to you that they find. They can also be set to automatically fix some of the errors for you.

The industry standard for JavaScript is ESLint. VS Code has an ESLint extension. Here is a guide.

Prettier

It will take your JS code and then format it according to a set of rules. Unlike a linter, it’s not looking for style errors, but specifically targeting the layout of your code and making decisions about things like spaces, indentation levels and line-breaks.

Resolving conflicts with using ESLint and Prettier together

Using ESLint and Prettier together causes conflicts. To fix that follow the instructions to install eslint-config-prettier. It turns off all ESLint rules that might conflict with Prettier.

Note: You might find guides on the Internet saying you should also extend stuff like "prettier/react". Since version 8.0.0 of eslint-config-prettier, all you need to extend is "prettier"! That includes all plugins.

Warning: eslint-plugin-prettier lets you run Prettier as if it were a rule in ESLint. However, doing this is not recommended.

Template Repositories

Minimize the repetitive work of setting up ESLint and Prettier by using a template repository.

Top comments (1)

Collapse
 
emmabase profile image
Emmanuel Eneche

Quite informative πŸ‘