1. Set up Absolute Imports
Relative paths are the default behaviour for adding imports in React which would make the project look unorganized once it goes complex. Instead, we can use absolute paths for adding imports by just adding a new jsconfig.json file at the root level of your project as given below:
After adding the file, the imports can be reorganised to look like this:
// Absolute Import import HelloWorld from 'components/HelloWorld'; // Relative Import import HelloWorld from '../../components/HelloWorld';
2. Install Dependencies
Moving on to set up ESLint and Prettier, we would be required to add a bunch of dependencies in our application like babel, eslint, eslint-config, import resolver, and eslint plugins using the command given right below.
npm install --save-dev @firstname.lastname@example.org @email@example.com @firstname.lastname@example.org email@example.com firstname.lastname@example.org email@example.com firstname.lastname@example.org email@example.com firstname.lastname@example.org email@example.com
The exact version to be used for a particular dependency is mentioned as they are dependent on each other to function correctly but if you want to play around a bit with the latest versions, you may use this command to install the latest versions:
npm install --save-dev @babel/core @babel/eslint-parser @babel/preset-react eslint eslint-config-prettier eslint-import-resolver-jsconfig eslint-plugin-import eslint-plugin-prettier eslint-plugin-react prettier
3. Add ESLint Config file
The ESLint config can either be generated via the command line using the command eslint --init and answering a few questions regarding the code conventions to be followed or using some existing configuration like the one given below. This configuration already solves the problem of conflicting rules between prettier and eslint for quotes and indentation. In order to use this configuration, you would be required to create a new file .eslintrc.json at the root of your project.
Feel free to play around with the rules defined above or extend some of the commonly used configurations like eslint-config-airbnb, eslint-config-google, etc in order to figure out what’s best suited for your project.
4. Update scripts
Now in order to test the linting commands let’s update the scripts in our package.json file by adding the commands given below:
"lint": "eslint . --max-warnings=0", "lint:fix": "eslint . --max-warnings=0 --fix"
npm run lint
5. Update Settings for VSCode
We can update the VSCode Configuration such that it displays the linting and formatting errors and fix the auto-fixable ones on saving the file. In order to achieve this, we would be required to install a few extensions: ESLint and Prettier. I also recommend installing Error Lens which helps in highlighting the errors/warnings in the file itself while writing the code. Once this is done, we would require to add a new
.vscode/settings.json file to the root of the project as shown below:
Once all of this configuration is done, ESLint and Prettier should be up and running for linting and formatting your project as shown in the attached screenshot:
Here is a link to the complete setup on Github.
Thanks for reading. Do let me know your thoughts on setting up ESLint and Prettier with React apps.
Want to connect? React out on Twitter, LinkedIn or in the comments below!
Oldest comments (0)