M2 ESLint setup - step by step guide

README.md

M2 project - ESLint basic setup

Initialize and setup the eslint for the current project:

# Check if you have `npm` installed
npm -v

# Initialize npm
npm init

# Initialize eslint in the current project
npx eslint --init

# How would you like to use ESLint?
# 	> To check syntax and find problems, and enforce code style

# What type of modules does your project use? 
#		> commonjs
# Which framework does your project use?
#		> None of these
# Does your project use TypeScript?
#		> No
# Where does your code run?
#		> ✔ browser
#		> ✔ Node 
# How would you like to define a style for your project?
#		> Use a popular style guide
# Which style guide do you want to follow?
#		> Standard
# What format do you want your config file to be in?
#		> JavaScript
# Would you like to install witn npm?
# 	> Y

Install the ESLint extension in VS Code:

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Setup the ESLint settings in VSCode:

1. Open the VSCode Command Palette:

   Mac: CMD + Shift + P

   Win/Linux: Ctrl + Shift + P

2. Type and open the Open Settings (UI)

3. Type and Enable the option Eslint Format Enable

4. Type and Enable the option JavaScipt Format: Enable

Troubleshooting

It could be possible that you already have prettier or other formater installed. In case that you have Beautify extension installed in your VSCode, uninstall it.

Also you may want to check the Settings and the option Editor: Default Formatter:

1. Open the VSCode Command Palette:

   Mac: CMD + Shift + P

   Win/Linux: Ctrl + Shift + P

2. Type and open the Open Settings (UI)

3. Type and Search for the option Editor: Default Formatter

4. From the dropdown select null