JavaScript: Eslint & prettier setup
a quick tutorial on how to set up linting and formating following Airbnb guidelines.
With the newer versions of NPMwe gain access to a swath of useful features, one of the main ones being NPX. NPX allows us to clone an npm module down without needing to download them locally onto our computer or set global scopes, keeping the clutter down in our terminal environments.
To quickly set up linting and prettier inside of a project, make sure to cd into the repository that you want to set up your linter and formatter and then run the following commands ->
npm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-node eslint-config-nodenpx install-peerdeps --dev eslint-config-airbnb
they will install the node modules necessary to getting ESLint and prettier to play nice together. If you don’t want the react aspect of ESLint, run the following NPX command instead of the one above ->
npx install-peerdeps --dev eslint-config-airbnb-baseThis makes it so you only have the base rules provided by ESLint by Airbnb from their lint/config/base repo. The repositories can be found here for the style guides. From there you want to create a .eslintrc.json file and paste the following code into it
This sets prettier to be the default formatter and changes some rules for the linter, if you want base settings you can change the linter rules here but you must keep the prettier/prettier rule if you want to see the formatting errors appear in your coding environment. You next want to create a .prettierrc file.
This is an example of my .prettierrc file, its just going to hold the rules that you set for your project.
all of this helps to make your project more organized and allows for your project to be maintained by multiple people without there being any stylistic differences.
Walah! we’re done! enjoy playing around with the rules in your prettier and ESLint config files and a more organized way of coding!
