Linting - Linting is the process of checking the source code for Programmatic as well as Stylistic errors. This is most helpful in identifying some common and uncommon mistakes that are made during coding. ESlint is a JavaScript linting tool. Prettifying – formatting the code (similar to ctrl+shift+f in eclipse). Prettier is a well know prettifying tool in JavaScript community.
Integrating Eslint & Prettier in React
- Installing and using ESlint in a JavaScript project. (Specific to JS project)
https://eslint.org/docs/user-guide/getting-started
- Installing and using ESlint along with Code prettier in a react-redux application and extending Airbnb’s style guide.
https://medium.com/quick-code/how-to-integrate-eslint-prettier-in-react-6efbd206d5c4
Summary from above link
Install Eslint and Prettier Step 1: Eslint, it’s configuration by Airbnb and it’s required packages…
npm i -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
Step 2: Prettier, it’s configuration to avoid conflict with Eslint and it’s required packages…
npm i -D prettier eslint-config-prettier eslint-plugin-prettier
Step 3: need to install
npm install eslint babel-eslint --save-dev
Step 3: (Optional) Now to stop letting user committing into the repository we will install below packages.
npm i -D husky lint-staged pretty-quick
husky: Will run npm script before the committing the code.
lint-staged: Will run custom script on the filtered files by the extensions like .js or .jsx
pretty-quick: Will prettify your code.
Setting up VS Code Below plugins need to be installed in VScode. (This need to be done by everyone in their VScode) a. ESLint b. Prettier
To install these plugins, go to “view > extensions” and search for ESlint and install
Then search for Prettier and install
Step 5: Changing editor settings
Go to settings, open settings.json and paste below in user settings. These settings auto prettify and auto lint on save.
{ "editor.formatOnSave": true, "editor.formatOnType": true, "eslint.autoFixOnSave": true, "eslint.enable": true }
Links to read • Airbnb style guide - https://github.com/airbnb/javascript • Why to use Prettier and what it does – o https://prettier.io/docs/en/why-prettier.html o https://prettier.io/docs/en/rationale.html • Prettier vs Linters - https://prettier.io/docs/en/comparison.html • Airbnb vs Google vs Common style guides - https://medium.com/@uistephen/style-guides-for-linting-ecmascript-2015-eslint-common-google-airbnb-6c25fd3dff0