katiash
commented
6 years ago ➤ ekaterina.shukh@gmail.com commented:
Required Steps for ESLint install:
- Install:
a) To install ESLint globally: npm i -g eslint b) To install ESLint locally into/per project: npm install eslint --save-dev (depends on package.json to exist)
(depends on package.json to exist)
- To create ESLint config file: a) eslint --init b) ./node_modules/.bin/eslint --init
Select following options when prompted: ? How would you like to configure ESLint?
- Use a popular style guide ? Which style guide do you want to follow?
- Airbnb ? Do you use React?
- Yes ? What format do you want your config file to be in?
- JSON
➤ ekaterina.shukh@gmail.com commented:
OI: I've made a pull request (PR) that incorporates ESLint into our project. If you aren't familiar with ESLint, I would suggest reading up on it as it's a great tool that is widely in used for JavaScript linting (https://eslint.org/docs/user-guide/getting-started). Basically, it will give us all a common set of standard JavaScript rules (such as no semi-colons, or prefer single-quotations), so that everyone's code is standardized.
After you have installed ESLint either globally or locally, you will notice that your package.json now also includes:
"devDependencies": { "eslint": "^4.18.2", "eslint-config-standard": "^11.0.0", "eslint-plugin-import": "^2.9.0", "eslint-plugin-node": "^6.0.1", "eslint-plugin-promise": "^3.6.0", "eslint-plugin-standard": "^3.0.1" }
We will add to scripts key/property:
(assuming you installed eslint globally) "scripts": { "lint": "eslint",
"fix": "eslint --fix "
}
(if you installed locally in your project) "scripts": { "lint": "./node_modules/.bin/eslint",
"fix": "./node_modules/.bin/eslint --fix <your_js_file(s) or directory>"
}
(NOTE: Don't forget to replace above)
To check your linting, run "npm run lint." This will show you any linting "errors" in your files.
Run "npm run fix" to fix those issues automatically.
OI: I would recommend integrating ESLint with a VS Code Plugin called Prettier (https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode). After you download prettier, go into your VS Code Settings (Code -> Preferences -> Settings) and paste in the following rules to integrate prettier with ESLint: "editor.formatOnSave": true, "javascript.format.enable": true, "prettier.eslintIntegration": true, (For more info or alternative ways for this setup, https://www.39digits.com/configure-prettier-and-eslint-in-visual-studio-code/) Basically, the above settings will make it so that whenever you save your document it will automatically fix formatting issues based on the ESLint standard.