This is a short guide to configure VS Code for a consistent and reusable development set-up.
Install ESLint locally and create a .eslintrc.json config file by running the below commands in the workspace folder —
I prefer local setup for each project however, it can be installed globally too. Run the below commands for a global installation and generating a .eslintrc.json config file —
Few configuration related questions will be asked, choose the options appropriately according to your preferences
Install ESLint VS Code extension using command
ext install vscode-eslint. For more information and configuration settings refer ESLint
Run below command to install Prettier
Integrating with ESLint
ESLint can run Prettier for you, just add Prettier as an ESLint rule using
eslint-config-prettier is a config that disables rules that conflict with Prettier.
eslint-plugin-prettier is a plugin that adds a rule that formats content using Prettier.
eslint-plugin-prettier exposes a “recommended” configuration that configures both eslint-plugin-prettier and eslint-config-prettier in a single step.
Add below lines in ‘.eslintrc.json’
‘eslint-config-prettier’ also ships with a little CLI tool to help you check if your configuration contains any rules that are unnecessary or conflict with Prettier.
Add this srcipt in ‘package.json’
npm run eslint-check
Prettier essentially compliments ESLint rules concerning styling. They both help in ensuring a consistent and clean code. This speeds up the development process by improving the quality of code-reviews. Developers will focus more on implementation detail rather than complain about syntax errors and different coding styles. For more information read Why Prettier?
a) Pre-commit hook can be set-up so that the code is always formatted before the commit. Pre-commit hook
b) Enable auto fix: View → Command Pallete → Open User Settings → add:
"eslint.autoFixOnSave": true line to the settings
This sets up VS Code with ESLint and Prettier for development with a consistent configuration.