- Quick Introduction of ESLint
- Quick Introduction of Prettier
- Configure ESLint and Prettier in Visual Studio Code
Prettier is an opinionated code formatter. It is highly recommended when comes to making code formatted consistently for you and your team. Prettier supports many languages out of the box.
We can search for them in VS Studio Marketplace and Install from there.
I have enable Editor: Format On Save. We can open settings from Ctrl + p and then type > Preferences: Open User Settings. Once opened check the box as shown below –
Execute the command “npm init -y” in the terminal and it will create package.json. Screenshot below
Execute the command “npm i -D eslint prettier” and it will install the ESLint and Prettier as dev dependencies. Once installed, it will update package.json as –
Installing this dependency will allow us to run prettier as eslint rules and report any issues. To install execute the command “npm i -D eslint-plugin-prettier eslint-config-prettier”.
We have to generate ESLint config files. Definitely we can generate the file manually, but I prefer generating the file through command. In order to generate ESLint config file through command line, we need to install ESLint globally. We can execute the command “sudo npm i -g eslint”
We can execute the command “eslint –init” and then answer the questions asked there. This will create the config file named “.eslintrc.json”.
All the ESLint configurations are listed here.
ESLint-plugin-prettier configurations are listed here.
This is what I recommend for ESLint config –
Here is the final package.json file
“test”: “echo “Error: no test specified“ && exit 1″
“author”: “Sudipta Deb”,
Let’s create HelloWorld.js under src folder with simple statement console.log(“Hello World”);
From the terminal, execute the below command to execute HelloWorld.js
Note – In the command, I have passed the file name “src/HelloWorld.js” but I have used — twice in the command. The reason for that to make sure letting npm know that the parameters are not for npm, rather this parameter is for the node so that it understands which file to execute.
Execute the below command “npm run lint — — src” which will execute eslint in all the files present src folder. If there is no error, it will just show nothing. In case of error, it will show something like this –
The reason for this error is that Hello World is mentioned with single quotes and ESLint is recommending double quotes. You can fix these problems by executing “npm run lint — –fix src”.
I have shared this initial project in my Github Repo – ESLint-Prettier-VSCode-Setup
Below is the youtube video: