Setup ESLint and Prettier together for react and react-native projects in Visual Studio Code
ESLint and Prettier working on Visual Studio Code with create-react-app
It can get a bit overwhelming when you are getting into react development with all the different tools and coding…
So, lets correct those mistakes.
Installing eslint and eslint-config-airbnb
- Install eslint plugin for vscode
- Install eslint (you can also install this globally but I like to install it locally)
yarn add eslint -D
- Install eslint-config-airbnb which need few other dependencies as well
yarn add eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react -D
- Create .eslintrc file in the root directory and add the following lines
Now, you will start seeing lint errors in your code.
Installing prettier for code formatting (If you have prettier plugin installed via vscode plugin, uninstall it as it causes the code formatting twice)
- Install prettier and related dependencies
yarn add prettier eslint-config-prettier eslint-plugin-prettier -D
- Update .eslintrc with following lines
VSCode user settings
- Add following line to user settings
Now, whenever you save a file the code will be formatted using the eslint config which is airbnb in this case. Please, comment you find any better ways for doing this.