Front-end JS code specification (Eslint + Prettier) - Moment For Technology (2023)

ESlint configuration details

ESlint is a plugin for static checking of JavaScript code. The core of ESlint is the ability to check code quality and style issues by analyzing code through AST (Abstract Syntax Tree) pattern matching derived from code analysis.

Once the esLint dependencies are installed, you can also choose from open source configuration schemes such as eslint-config-Airbnb or eslint-config-standard. It can also be configured according to individual or team coding style. Once configured, the project's code can be statically inspected to find and fix code that is not within specification using a command-line tool or the built-in ESLint editor feature. ESLint also provides automatic repair features that can help you fix code formatting issues automatically.

Detailed description of the configuration file

1st root

By default, ESLint will look for configuration files up to the root directory. When a config file is found at a level with the root parameter set to true, ESLint will stop looking one level higher and all rules from the config file will be applied on top of each other. If there are duplicate attribute settings, the configuration file closest to the file takes precedence

PS: If there are multiple configuration files in the project directory, ESLint will use only one with priority .eslintrc.js .eslintrcs package.json

2. Environment runtime

Specify the environment in which the script runs, each with a specific set of predefined global variables

Here is an example:

(Video) VSCode ESLint, Prettier & Airbnb Style Guide Setup

env:{node:true,browser:true,es6:false}copy or code

If you set ES6 to false as above, ESLint tests will report errors if the keywords let, const, etc. For example, if browser is true, it means the script is running in a browser environment. If Browser is false, no error is thrown when the window appears in the code.

3. Global

Additional global variables the script has access to at runtime

globais: {$:true jquery:true}copy or code

4. Analyzer Options Analyzer Options

ECMAScript5 syntax is supported by ESLint by default. In this configuration, you can specify ECMAScriipt version and JSX support. The following options are available:

  • EcmaVersion which specifies the ECMAScript version we want to use, for example 3, 5 (default), 6, 7, 8, 9, 10
  • SourceType, set to script (default) or module (if code is in an ECMAScript module).
  • EcmaFeatures which represents the additional language features we want to use
    • GlobalReturn, which allows the return statement to be used in a global scope
    • ImpliedStrict, enable global strict mode (if ecmaVersion is 5 or higher)
    • JSX, enable JSX
    • ExperimentalObjectRestSpread is not recommended
parserOptions: { ecmaVersion: 6, sourceType: "moduł", ecmaFeatures: { "jsx": true } },copy or code

5. Analyzer

First, what is a parser? ESLint only validates ECMAScript languages ​​by default. For example, if we need to validate TypeScript languages, install the @typescript-esLint /parser parser. Configure parser options. Generally both Parser and parserOptions should be used at the same time.

Parser Specifies the parser to use. ESLint uses Espree as the default parser. Common parsers include:

  • express
  • @babel/eslint - parser:
  • @typescript-eslint/parser: Converts typescript into a stree compatible form for use in ESLint
  • browser-eslint-parser

6. processor

Specifies the plug-in handler (required in conjunction with the plug-in box) and what the handler does

(Video) ESLint + Prettier + VS Code — The Perfect Setup

  • This is a specification that can extract JavaScript code from other files (non-javascript files) and make ESLint examine this JavaScript code
  • During pre-processing, if you need to do some JavaScript transformation, you can use CPU

Example 1: Enable processor A provided by plug-in A

{ "plugins": ["plug-in"], "processador": "plug-in/processador" }copy or code

Example 2: Specify the renderer for a specific file type

{ "plugins": ["a-plugin"], "overrides":[{ "files": ["*.md"], "processor": "a-plugin/markdown" }]}copy or code

7. Plugs

ESLint supports third-party plugins that must be installed using NPM before they can be used. The esline-plugin section can be omitted after the introduction.

What are the main features of plugins? Plugins are typically used to extend the capabilities of a framework, in this case ESLint. Plugins simply add new features to ESLint beyond the usual ability to check JS code specs. Here are two examples:

Example 1: ESlint-plugin-prettier This plugin gives ESLint the ability to format your code to make it look prettier.

npm i eslint-plugin-prettier -d {plugins: ['prettier']}copy or code

Example 2: To use TypeScript in your project, you must first change the parser to @typescript-eslint/parser and install @typescript-eslint/eslint-plugin to extend the rule. Rules in added plugins are not enabled by default so we have to use them in rules which means plugins are used in conjunction with rules or directly through extensions.

(Video) ESLint with VSCode, Prettier, Husky and React For Beginners

// NPM I --save-dev @typescript-eslint/eslint-plugin // registra plugins {"parser": "@typescript-eslint/parser", "plugins": ["@typescript-eslint"], // Insira as "regras" do plug-in: {"@typescript-eslint/rule-name": "Error" // use a regra do plug-in '@typescript-eslint/rabin-overload -signatures': 'error', '@typescript-eslint/ ban -ts-comment": "erro", "@typescript-eslint/ban-types": "erro", "@typescript-eslint/explicit-module-boundary-types": "aviso", "@typescript-eslint" /no-array-constructor': 'erro', 'no-empty-function': 'off', '@typescript-eslint/no-empty-function': 'error', '@typescript-eslint/no-empty -interface": "erro", "@typescript-eslint/no-explicit-any": "aviso", "@typescript-eslint/no-extra-non-null-assertion": "erro", ... } }copy or code

Or use the extensions to sign in

{ "extends": ["eslint:recommended", // Official extension "plugin:@typescript-eslint/recommended", // Plugin:@typescript-eslint/recommended", // NPM package, popular community of configuration solutions open source, eg: eslint-config-airbnb, eslint-config-standard],}copy or code

8. Expands the span

Used to inherit some basic settings. Values ​​can be strings/arrays. When the value is an array, each setting inherits its previous setting. Ll: No, I don't need to write my rules in advance. Don't write rules one by one, if you have rules that don't suit you, write rules and replace the basic configuration elements (for example, Eslint :recommended).

9. Rules Configure Rules


2, ESLint + prettier

3, ESlint, Prettier Installation Usually involves automatic or manual scaffolding if there is already a project where you want to introduce ESlint and Prettie

1. Install ESLint

npm i eslint -Dcopy or code

2. ESlint starts configuration to generate files like.eslintrc.js

eslint --initcopy or code

3. Create. Eslintignore Archive

to create. Eslintignore in the root of the project and add directories and filenames to the file to bypass the check as shown in the example below:

/dist/publics/libs/originpackage.jsoncopy or code

4. Install a more beautiful one

for example me prettier -Dcopy or code

5. Install eslint - config - prettier

The main purpose of ESLint is to disable rules where Prettier is configured to conflict with ESLint

(Video) How To Setup Next.JS with TypeScript, Prettier, ESLint and Husky

npm i eslint-config-prettier -Dcopy or code


extends: ["eslint:recommended", "prettier"],copy or code

6. Install eslint - plugin - prettier

Prettier formatting capability in ESLint is mainly for integrating formatting with Prettier in ESLint

npm e eslint-plugin-prettier -Dcopy or code

Modify. Eslintrc.js Configuration

{"Regras": {"prettier/prettier": "erro"}, "plugins": ["prettier"],}copy or code

Or combine these two steps and use extensions

{ "extends": [ "eslint:recommended", "plugin:prettier/recommended" ]}copy or code

7. Create a.prettierrc.js file in which the default prettier setting will be modified

Module. exports = { // exports require a semicolon: false,}copy or code

8. Create a good ignore

Ignore some file formatting

dist node_modules .eslintignore .prettierignorcopy or code

3, ESLint + Prettier integration with VSCode

1. Install the following plugins:

  • ESLintName
  • more beautiful
  • EditorConfig for VS Code, this plugin allows the compiler to read configuration files

2. Configuration setting. json

  1. Configure workspace settings. json file
{//# Automatic formatting "editor.formatOnSave": true, "editor.codeActionsOnSave": {"source.fixall.eslint": true}copy or code
  1. Json userspace, create a file. Vscode directory in the root of your project and create a settings.json file in that directory.
{ "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true, }, "eslint.validate": ["typescript", "javascript", "vue"]}copy or code

3. Configure the EditorConfig file

to create. Editorconfig in the project's root directory. Once created, the code specification rules defined in this file will be superior to the compiler's default code specification rules.

(Video) Configuring ESLint and Prettier for TypeScript

root = true [*] charset = utf-8 indent style = espaço indent_size = 2 insert_final_newline = true trim_trailing_whitespace = true end_line = autocopy or code

4. Referral links


Should I use ESLint or Prettier or both? ›

Benefits of using Prettier and ESLint

As mentioned earlier, whereas Prettier takes care of your code formatting, ESLint takes care of your code style. The former does everything automatically for you. If you have set up Prettier, you can configure it to format your file on saving it.

How do I fix ESLint errors automatically? ›

You can set up ESLint to run auto-fix every time you press CTRL+S (or COMMAND+S ). For ESLint to work correctly on file same, you must change the Visual Studio Code preferences. Go to File > Preferences > Settings (or Code > Preferences > Settings).

Should you use Prettier with ESLint? ›

From experience, Prettier is simply better at formatting than ESLint, and covers more scenarios while at the same time having less configuration. Less configuration is less bikeshedding you need to do with your teammates.

What is the difference between ESLint and Prettier JS? ›

ESLint performs automated scans of your JavaScript files for common syntax and style errors. Prettier scans your files for style issues and automatically reformats your code to ensure consistent rules are being followed for indentation, spacing, semicolons, single quotes vs double quotes, etc.

Should I run Prettier before or after ESLint? ›

* ESLint config file. Make sure to put the Prettier config last so it overrides the settings from other configs.

Can ESLint break code? ›

Functional breaks are possible but highly unlikely. Breaking something related to the Typescript compiler is more likely but instantly spottable and easy to fix/rollback. Also, it depends on what rules you use; just eslint:recommended should be very safe.

How do I get rid of lint errors? ›

Lint errors can be suppressed in a variety of ways:
  1. With a @SuppressLint annotation in the Java code.
  2. With a tools:ignore attribute in the XML file.
  3. With a //noinspection comment in the source code.
  4. With ignore flags specified in the build. ...
  5. With a lint. ...
  6. With a lint. ...
  7. With the —ignoreflag passed to lint.
  8. With a baseline.

How to bypass ESLint error? ›

To temporarily turn off ESLint, you should add a block comment /* eslint-disable */ before the lines that you're interested in: /* eslint-disable */ console.log('JavaScript debug log'); console.log('eslint is disabled now'); Once ESLint sees the /* eslint-disable */ comment it turns off the parsing.

How to set ESLint in JavaScript? ›

Manual Set Up
  1. Install the ESLint package in your project: npm install --save-dev eslint. ...
  2. Add an .eslintrc file in one of the supported configuration file formats. ...
  3. Add configuration to the .eslintrc file. ...
  4. Lint code using the ESLint CLI: npx eslint project-dir/ file1.js.

How do you check if ESLint is working or not? ›

Open the command palette by pressing Ctrl / Cmd + Shift + P and select 'ESLint: Show Output Channel'. If ESLint throws any errors, they should appear here. That's always a good starting point for further debugging.

How do I disable ESLint errors in Visual Studio? ›

Type 'eslint quiet' in the search bar and click the check box for quiet mode. In quiet mode, eslint would ignore basic errors.

Why do people use ESLint? ›

Linting tools like ESLint allow developers to discover problems with their JavaScript code without executing it. One of the main the reason for ESLint was created was to allow developers to create their own linting rules. You can use ESLint in any application that runs on Javascript/Typescript: React/React Native.

What is the advantage of ESLint? ›

One of the main benefits of using ESLint for software security is that it automates the detection of potential vulnerabilities. This can save you time and effort that would be spent manually reviewing your code, and can help you catch issues early on in the development process before they become a bigger problem.

How do I auto fix Prettier errors? ›

Try running npx prettier --write . on your project's directory. This command will tell prettier to fix simple errors (such as this one) when found.

What are the advantages of Prettier? ›

Benefits of Prettier Code Formatter
  • It can help you avoid common errors, such as forgetting to add a semicolon to the end of a code and improves the quality of your work. ...
  • Prettier helps you maintain a consistent code style across your project. ...
  • Enforcing a consistent style across your codebase is very important.
Nov 7, 2022

How to use ESLint in JavaScript? ›

Install Node. js
  1. Install Node. js. ...
  2. Set up the project folder. ...
  3. Install ESLint and set up the config file. ...
  4. Use ESLint to check JavaScript code. ...
  5. Use ESLint to check TypeScript code. ...
  6. Use tsc to check TypeScript code. ...
  7. Add scripts for linting in package.json.
Aug 12, 2022

How to make Prettier work for JavaScript? ›

How to use Prettier in VS Code
  1. // enable globally (here: format on save) "editor.formatOnSave": true. // enable per-language (here: Prettier as formatter) "[javascript]": { ...
  2. "editor.formatOnSave": true. "prettier.singleQuote": true, "prettier.printWidth": 70, "[javascript]": { ...
  3. { "singleQuote": false, "printWidth": 120, }
Feb 14, 2022

How do you integrate Prettier and ESLint with VS code? ›

Open the terminal in your project root folder and install eslint as a dev dependency. We also need to enable the eslint and prettier extension for the VSCode. So visit the extensions section of VSCode (ctrl + shift + x) and search for Eslint and Prettier — Code formatter and install it.

What is the difference between ESLint and Prettier in react? ›

Roles of ESLint and Prettier

ESLint is a linter that finds problems in your code and shows errors and warnings. Because it's a linter, it has a lot of rules. On the other hand, Prettier is a formatter. So when you format codes, Prettier does formatting based on ESLint.

What is faster than ESLint? ›

Advantages of quick-lint-js over ESLint

According to these benchmarks, against certain constraints such as input latency, quick-lint-js is over 130 times faster than ESLint. The benchmarks also help its claim as the quickest JavaScript linter and the least energy consumer.

Do companies use ESLint? ›

ESLint is the #1 JavaScript linter by downloads on npm (over 32.1M downloads / week) and is used at companies like Microsoft, Airbnb, Netflix, and Facebook.

Is ESLint built into VS Code? ›

ESLint supports you and teams to follow a common code style in your project. It can be used in VS Code by installing it from the VS Code Marketplace. Once you have integrated it in VS Code, you can configure ESLint to enforce a code style in your files.

Can ESLint be used for HTML? ›

Linting HTML

This plugin focuses on applying ESLint rules on inline scripts contained in HTML. It does not provide any rule related to HTML. For that, you can use other plugins like @eslint-html or @angular-eslint. eslint-plugin-html is compatible with those plugins and can be used along them.

What are the warning levels for ESLint? ›

ESLint offers three settings for any given rule: error , warn , and off . The error setting will make ESLint fail if it encounters any violations of the rule, the warn setting will make ESLint report issues found but will not fail if it encounters any violations of the rule, and the off setting disables the rule.

What causes so much lint? ›

An accumulation of excess lint around or behind your dryer can be the result of a clogged dryer vent. Since a clogged vent restricts airflow so that the air cannot move the lint to the outside of your home, it forces the lint into the area behind your dryer.

How to ignore ESLint file in JavaScript? ›

You can configure ESLint to ignore certain files and directories while linting by specifying one or more glob patterns. You can ignore files in the following ways: Add ignorePatterns to a configuration file. Create a dedicated file that contains the ignore patterns ( .eslintignore by default).

How to disable ESLint in file js? ›

There are 3 ways you can do this:
  1. You can go with 1.2 and add /* eslint-disable */ on top of the files, one by one.
  2. You can put the file name(s) in . eslintignore . ...
  3. Alternatively, if you don't want to have a separate . eslintignore file, you can add "eslintIgnore": ["file1.

How to disable ESLint in JavaScript? ›

To disable all ESLint rules check on a current single line code, we can add eslint-disable-line on the right side of the code. If we want to specific only certain rules, we can append the rule name.

Why use ESLint JavaScript? ›

The primary reason ESLint was created was to allow developers to create their own linting rules. ESLint is designed to have all rules completely pluggable. The default rules are written just like any plugin rules would be. They can all follow the same pattern, both for the rules themselves as well as tests.

Where are ESLint settings? ›

The ESLint configuration is in the ./node_modules/@spm/eslint-config/index.

What is linting in JavaScript? ›

Linting in JavaScript refers to the process of identifying potential errors in code by using a program. Initially, the JavaScript lint tool, like earlier similar utilities, analyzed source code to determine which compiler optimizations could be made.

How to check ESLint errors in visual studio? ›

To find the settings in Visual Studio Code, use the command palette to open Preferences: Open Workspace Settings (JSON). With this code in your settings.json file, ESLint will now automatically correct errors and validate JavaScript on save.

How do I run ESLint in Visual Studio? ›

To enable linting support in Visual Studio 2022 or later versions, enable the Enable ESLint setting in Tools > Options > Text Editor > JavaScript/TypeScript > Linting. In the options page, you can also modify the set of files that you want to lint.

How do I remove ESLint from a project? ›

This takes a few steps but it isn't too difficult, thankfully!
  1. In your package.json, find and delete any dependencies which include eslint in the name.
  2. Remove any eslint configuration files, including any eslint configuration in package.json.
  3. Re-run `npm install` or `yarn` to clean up your project.
Mar 30, 2022

What file type does ESLint use? ›

ESLint supports configuration files in several formats: JavaScript - use .eslintrc.js and export an object containing your configuration. JavaScript (ESM) - use .eslintrc.cjs when running ESLint in JavaScript packages that specify "type":"module" in their package.json .

What is rules in ESLint? ›

Eslint is able to identify syntax errors thanks to rules. Rules are restrictions that a given block of code must follow. Eslint comes with its own set of rules but you can create custom rules for your personal project or organization project. Custom rules are created as plugins.

Who maintains ESLint? ›

Technical Steering Committee. The people who manage releases, review feature requests, and meet regularly to ensure ESLint is properly maintained. Creator of ESLint, independent software developer, consultant, coach, and author.

What are the pros and cons of linting? ›

Pro: Lint checks many things, including syntax errors and structural problems. Con: Lint can produce as many errors and warnings as there are lines of source code. This leads to high false positive and false negative rates.

What is the difference between ESLint and SonarLint? ›

ESLint: The fully pluggable JavaScript code quality tool. A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease; SonarLint: An IDE extension to detect and fix issues as you write code.

Does ESLint do formatting? ›

ESLint comes with several built-in formatters to control the appearance of the linting results, and supports third-party formatters as well. You can specify a formatter using the --format or -f flag in the CLI.

How do you align code with Prettier? ›

Click on the formatting section of the Text Editor tab and enable Format on Save Mode.
  1. Step 3: Format your code. Now, highlight your code and right-click. Select Format Document. ...
  2. Step 4: Select Prettier as the default. After you click on configure, select Prettier as the default formatter. And that's it!

How do you use Prettier and ESLint together? ›

With ESLint and Prettier already installed, install these two packages as well. eslint-config-prettier : Turns off all ESLint rules that have the potential to interfere with Prettier rules. eslint-plugin-prettier : Turns Prettier rules into ESLint rules.

Is there a better code formatter than Prettier? ›

StandardJS Overview. StandardJS is an open-source, no configuration linter, formatter, and JavaScript style guide. It checks the code for probable errors with the linter. It also formats code automatically, and helps you write code that is easy to read and understand.

Which Formatters better than Prettier? ›

EditorConfig, ESLint, TSLint, SonarQube, and Stylelint are the most popular alternatives and competitors to Prettier.

Should I use ESLint or TSLint? ›

TSLint was a linter equivalent to ESLint that was written specifically to work directly on TypeScript code. TSLint is deprecated and you should use typescript-eslint instead.

Should I use Prettier in VS Code? ›

Using VSCode Prettier comes with several benefits. Here are some of the most significant benefits: Consistent code formatting: Prettier enforces a specific set of rules for formatting code, ensuring that your code is consistently formatted across your project. This makes your code more readable and easier to maintain.

What is the difference between ESLint and Prettier code formatter? ›

ESlint is not only a code formatter, it also helps developers to find coding errors. For Example, ESLint will give you a warning if you use a variable without declaring it. Prettier doesn't have such an ability. Also, ESLint will let you know what's wrong with your code formatting and give you options to fix the issue.

How do I format all code with Prettier? ›

From the directory you want to format, run Prettier with --write : prettier --write . This will format the entire directory recursively with Prettier. If you'd rather not install Prettier globally, then you can achieve the same effect with the npx command (the npm package runner):

What is the difference between Prettier and VS Code? ›

Functionally there is no difference, they will both work. The VS Code extension Prettier (not Pretty Formatter, that's different) includes a recent copy of the prettier npm package inside it, which it will use by default if you don't have the package installed via npm in your repo.

Is ESLint a formatter? ›

ESLint comes with several built-in formatters to control the appearance of the linting results, and supports third-party formatters as well. You can specify a formatter using the --format or -f flag in the CLI.

Why do I need Prettier? ›

Prettier is very popular because it improves code readability and makes the coding style consistent for teams. Developers are more likely to adopt a standard rather than writing their own code style from scratch, so tools like Prettier will make your code look good without you ever having to dabble in the formatting.

What is Prettier Prettier VS Code? ›

Here's how to configure the Prettier settings on VS Code. Go to Settings by clicking “Command + ,(comma)” if you are using a Mac or “Control + ,(comma)” for Windows. Search for “Prettier” to see a list of the settings displayed. You can change them in the editor and then hit “Save” when you are done.

Do I need ESLint if I use TypeScript? ›

ESLint is capable of performing a comprehensive set of code quality checks on TypeScript. It is the recommended linter for TypeScript code.

What is ESLint good for? ›

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs. ESLint is completely pluggable. Every single rule is a plugin and you can add more at runtime.

How do you beautify Javascript in Visual Studio Code? ›

To do this, go to File->Preferences->Settings: Under Text Editor, select Format On Save. Now when saving a file, it will be beautified.

How can I make VS Code more attractive? ›

Using your preferred font in VS Code
  1. Download the font from the above links to your computer and install them locally. I would recommend installing the TTF fonts from the downloaded . ...
  2. Open your VS Code's settings. json file through the command palette (⇧⌘P). ...
  3. Add the following two lines of code to the settings.
Oct 19, 2022


1. Formatting your code is a waste of time - use Prettier instead
(Kevin Powell)
2. Tutorial - Use Prettier and ESLint in Visual Studio Code | Lint and Format your Code
(Future Web Design)
3. VS Code + vue eslint + save and auto format code
(BlackMax cc)
4. Prettier EsLint Configuration in Angular Application
(TechBuild with San)
5. Setting up a JavaScript project for beginners (Prettier, node, npm, Parcel, ESLint, React, Vue)
(Hunor Márton Borbély)
6. React/Next.js typescript airbnb eslint code style setup guide
(Computer Science Dev)
Top Articles
Latest Posts
Article information

Author: Virgilio Hermann JD

Last Updated: 05/28/2023

Views: 6180

Rating: 4 / 5 (61 voted)

Reviews: 84% of readers found this page helpful

Author information

Name: Virgilio Hermann JD

Birthday: 1997-12-21

Address: 6946 Schoen Cove, Sipesshire, MO 55944

Phone: +3763365785260

Job: Accounting Engineer

Hobby: Web surfing, Rafting, Dowsing, Stand-up comedy, Ghost hunting, Swimming, Amateur radio

Introduction: My name is Virgilio Hermann JD, I am a fine, gifted, beautiful, encouraging, kind, talented, zealous person who loves writing and wants to share my knowledge and understanding with you.