How to use Eslint and Prettier in Visual Studio Code and React Apps

In this article, I will talk about Eslint and Prettier tools that are constantly used in the software world and that allow you to edit your code and create certain rules.

These two tools, which occupy an important role especially in the world of javascript, allow your code to be more organized and understandable. Let’s first look at what Eslint and Prettier are.

Eslint : It is a tool that provides static analysis of your ECMAScript/JavaScript code to find problems in your code. The basic working logic finds the errors in your code in line with the determined rules and gives you some feedback.

Prettier: It is called code formatter or shaper, by using prettier you can fix the style problems of your code. It saves your time while coding.

Let’s use Eslink and Prettier in a React app and Visual Studio Code environment to understand the subject better.

First, let’s download the Eslint and Prettier extensions in the Visual Studio Code environment.

Then we need to make a few settings so that these two tools can work in Visual Studio Code.

Windows/Linux — File > Preferences > Settings.

macOS — Code > Preferences > Settings.

Let’s write “format” in the search section and mark the “Editor:Format On Save” box. After that, choose Prettier-Code formatter (esbenp.prettier-vscode) in Default Formatter. In this way, every time we save our code, the prettier plugin will be running and it will ensure that our code becomes organized.

Let’s create a React app.

npx create-react-app myapp

Let’s make the HTML codes of the app.js file unorganized.

As soon as we save the changes in the file, our prettier will work on our files and will have organized our code according to its own default rules.

After that, you should create a file named .prettierrc in the root directory, we will write this file in JSON format. Then, enter the following values in our file.

{
“tabWidth”: 4,
“singleQuote”: true
}

When we save the App.js file, we will see a file in the following order.

In the change we made, we set the number of spaces from 2 per indentation level to 4 by making tabWidth 4 in our code, and with singleQuote:true, we provided the use of single quotes instead of double quotes in our code. You can see the changes made by looking at the import section. As you use Prettier, you will see that your code is written cleanly and neatly, and you will save time and effort. To add more options to the Prettier file, you can refer to this link.

Now let’s create an Eslint file that allows us to write our code according to certain rules. We will use the Eslint Cli for this. This tool allows you to create a custom .eslintrc file by asking specific questions. Now let’s type the following expression in the terminal.

npx eslint --init

How would you like to use ESLint? …
To check syntax only
❯ To check syntax and find problems
To check syntax, find problems, and enforce code style

What type of modules does your project use? …
❯ JavaScript modules (import/export)
CommonJS (require/exports)
None of these

Which framework does your project use? …
❯ React
Vue.js
None of these

Does your project use TypeScript? › No / Yes

Where does your code run?
❯ Browser
Node

What format do you want your config file to be in? …
JavaScript
YAML
❯ JSON

Would you like to install them now with npm? No / Yes

When we answer the questions as above, a file named .eslintrc.json will be created in our root directory.

{
"env": {  
 
  "browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
}
}

Environments (env): An environment provides predefined global variables.

Extends: You can extend your rule set from other sets instead of using standard rules. Example plugins are the Airbnb and react-app packages.

Globals: (parserOptions) ESLint allows you to specify the JavaScript language options you want to support. By default, ESLint expects ECMAScript 5 syntax. You can enable support for JSX as well as other versions of ECMAScript using the parser options.

Plugins: ESLint supports the use of third-party plugins. To configure plugins inside a configuration file, the plugin key is used, which contains a list of plugin names.

Rules: ESLint comes with lots of built-in rules and you can add more rules via plugins. You can set which rules your project will use from this key. We need to use the following variables when setting the rules.

“off” or 0: turns off the rule

“warn” or 1: shows rule as a warning (does not affect code)

“error” or a 2: if there is rule-breaking code, it will show an error report.

Now we will see the following errors in the terminal where we have started our react app (npm start)

• If you get an error running the npm start command, you can download the Eslint 7.11.0 package. npm i -D eslint@7.11.0

src/App.js
  Line 6:5: ‘React’ must be in scope when using JSX react/react-in-jsx-scope
  Line 7:7: ‘React’ must be in scope when using JSX react/react-in-jsx-scope
  Line 8:9: ‘React’ must be in scope when using JSX react/react-in-jsx-scope
  Line 9:9: ‘React’ must be in scope when using JSX react/react-in-jsx-scope
  Line 10:16: ‘React’ must be in scope when using JSX react/react-in-jsx-scope
  Line 12:9: ‘React’ must be in scope when using JSX react/react-in-jsx-scope

The reason for this is that we create an app with create-react-app by default, we can run the application without any error without the need to import React package. However, in the structures we extend in the .eslintrc file, there are rules that include React must be imported in javascript files. We can change these rules ourselves from the rules key in .eslintrc.

"rules": {
"react/react-in-jsx-scope": "off"
}

When we change the Rules section as above and run the application again, the problem will disappear. As you can see, if your code does not comply with the rules in the .eslintrc.json file, it will throw an error.

Now let’s integrate the .eslint-config-airbnb package, which is a popular extension for Eslint. For this, write the following statement on the command line and run it.

npx install-peerdeps -D eslint-config-airbnb

We will have downloaded all the necessary packages with this command. Then we add airbnb eslint packages to the extends key in the .eslintrc.json file to use it.

"extends": ["plugin:react/recommended", "airbnb", "airbnb/hooks"]

Then, when we start our application again (npm start), we will get errors as follows.

Line 6:5:JSX not allowed in files with extension '.js'                react/jsx-filename-extension
  Line 10:16:  `code` must be placed on a new line                          react/jsx-one-expression-per-line
  Line 10:39:  ` and save to reload.        ` must be placed on a new line  react/jsx-one-expression-per-line

src/index.js
  Line 8:3:    JSX not allowed in files with extension '.js'  react/jsx-filename-extension
  Line 11:34:  Missing trailing comma     comma-dangle

src/reportWebVitals.js
  Line 1:25:  Expected parentheses around arrow function argument  arrow-parens
  Line 3:32:  Expected a line break after this opening brace       object-curly-newline
  Line 3:74:  Expected a line break before this closing brace      object-curly-newline

There are codes in our javascript files that do not comply with the rules. For example, we get an error that JSX is not allowed in files with ‘.js’ extension. We can fix this situation by adding some rules.

"rules": {
"react/react-in-jsx-scope": "off",
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"object-curly-newline": ["error", { "multiline": true }],
"comma-dangle": "off",
"arrow-parens": "off"
}

After changing this part, the final version of our file will be as follows.

{
"env": {
"browser": true,
"es2021": true
},
"extends": ["plugin:react/recommended", "airbnb", "airbnb/hooks"],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["react"],
"rules": {
"react/react-in-jsx-scope": "off",
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"object-curly-newline": ["error", { "multiline": true }],
"arrow-parens": "off"
}
}

Without turning off all the rules in the code above, we can fix the errors in our code by putting certain rules in the .prettierrc file.

For example, we can delete the comma-dangle rules and add “trailingComma:all “ to the .prettierrc file. In this way, when we save our files, the comma-dangle problem will be solved. The final version of our files will be as follows.

.eslintrc.json

{
"env": {
"browser": true,
"es2021": true
},
"extends": ["plugin:react/recommended", "airbnb", "airbnb/hooks"],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["react"],
"rules": {
"react/react-in-jsx-scope": "off",
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"object-curly-newline": ["error", { "multiline": true }],
"no-console": [0]
}
}

.prettierrc

{
"singleQuote": true,
"trailingComma": "all",
"tabWidth": 2
}

As you can see, Eslint and Prettier can work in sync with each other. By using them, you can ensure that your code is written more regularly and by certain rules.

For more information, you can visit your Eslint and Prettier sites.