Write beautiful and consistent JavaScript code using ESLint, Prettier and VSCode

Write beautiful and consistent JavaScript code using ESLint, Prettier and VSCode

hackernoon.com hackernoon.com3 years ago in #Dev Love61

Originally published by Rohan Agarwal on March 27th 2019 Bring consistency across your JS code and teams Photo by Markus Spiske on Unsplash Proper code styling and formatting is a must for every project and even more so when you have multiple developers working on same codebase. With so many additions to JavaScript following the ECMA standards and different ways to perform a same task there need to be unified standards in your project on what to choose. You will find recommendations all over the internet on what to prefer but still there is no strict rule on what to use. For instance, you may choose to create variables using var instead of the JavaScript’s newlet keyword for scope based variables. So it is upto you to set rules for your project so that every developer on the team follows them and there is consistency across all your code. Here’s where code linting comes into play. What are linters? A linter is a program that analyses your source code for possible programmatic and styling errors. Different languages have different linters. ESLint is the linter for JavaScript. Since JavaScript is an interpreted language it is extremely useful to have programmatic errors pointed out before running the application. Here is a programmatic error that ESLint will catch and report to you: let myFunction = () ={}; myFuction(); // A typo causing error at runtime For styling errors, ESLint allows you to set rules specific to your project. If you deviate from those rules when writing code ESLint will report them to you. To check out the entire list of rules that ESLint supports follow this link: List of available rules Hey, that’s not what I came for, I wanted ESLint setup already. Setting up ESLint is super easy. First we need to install ESLint as a dev dependency:npm install eslint –save-dev Next we initialise ESLint for our project: ./node_modules/.bin/eslint –init You will then be asked a few questions regarding your preferences to configure ESLint and at the end .eslintrc will be generated.If you are unsure about the questions you can skip this step. Instead just create .eslintrc manually. At this point, you have a working ESLint setup for your project. The default ESLint configuration uses rules from eslint:recommended config. However, there is a better alternative in my opinion: eslint-config-airbnb. Airbnb has created a predefined set of ESLint rules based on Airbnb JavaScript Style Guide. This is an extremely useful resource for all JavaScript developers and tries to establish a common ground for good JS practices. They have reasoned every decision they have taken and give you a chance to understand the same. To get started install the following npm packages as dev dependency: // For react projects babel-eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react //For non react projects babel-eslint eslint-config-airbnb-base eslint-plugin-import Next you need to edit your .eslintrc to extend from Airbnb config. This is how your config would look like: Also note that you can still write custom rules that will override Airbnb config rules by specifying them in the rules block. Now ESLint is setup for your project and you can lint your files by running this command: ./node_modules/.bin/eslint [fileName] which will give you an output similar to this: Great! You can now have consistent code in your project that adheres to the rules you have set up.  » Read More

Like to keep reading?

This article first appeared on hackernoon.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply