Note: the example code for this post can be found here. See the repo’s README for instructions on how to install & run the tests.
When adding code to your repository, it is easy to overlook mistakes that you may have made. If you check these changes into your repository, you may not discover them until much later when you run the code or possibly never at all. For this reason, it’s nice to have some tools that automatically statically check and fix your code before you add it to your repository.
Tools:
- ESLint is a static analysis “linting” tool that is helpful in finding common problems in code.
- Prettier is an “opinionated code formatter” that enforces common style and formatting in all saved code.
- A style guides is a set of rules that ESLint and Prettier use to decide what rules should be enforced and how code should be formatted.
For this example, we are going to be using Airbnb Base style guide. There are many different style guides that can be used, each with their own rule nuances. Airbnb Base style guide is a commonly used one and is a good base choice for Node.js projects.
For a comparison of a few style guides and rules that are enforced, take a look at this article: Compare the Top 3 Style Guides
By adding ESLint, Prettier, and Airbnb Base style guide to your repository, you can use VSCode’s “format on save” functionality to:
- fix errors: display and sometimes automatically fix ESLint & Prettier errors
- fix formatting & improve readability: automatically reformat your code layout to match the Airbnb Base Javascript rules
Steps for adding ESLint, Prettier, and Airbnb Base to a repository:
After you have your basic repository setup, follow these steps for adding ESLint, Prettier, and Airbnb Base:
1. Install ESLint & Prettier as a dev-dependency:
npm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier
2. Install Airbnb Base style guide as a dev-dependency:
npx install-peerdeps --dev eslint-config-airbnb-base
3. Add “.prettierignore” config file to root directory:
# ignore everything except Javascript files (*.js): /* !/**/*.js
4. Add “.prettierrc.json” config file to root directory:
{
"trailingComma": "none",
"singleQuote": true,
"endOfLine": "auto"
}
5. Add “.eslintrc.json” config file to root directory:
{
"extends": [
"airbnb-base",
"prettier"
],
"plugins": [
"prettier"
],
"rules": {
"prettier/prettier": ["warn", {"endOfLine": "auto"}]
}
}
6. Add VSCode extensions:
– ESLint
– Prettier
Make sure that these extensions are installed and enabled.
7. Configure VSCode settings:
In VSCode:
– Press ctrl+shift+P or cmd+shift+P to open the Command Palette
– Search for “Preferences: Open Settings (JSON)”
– Look for “editor.formatOnSave” and “editor.defaultFormatter”.
– Either set to the following values or if not found, add the following lines to the bottom of the file
– Save and close the file
"editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true,
8. Test that ESLint & Prettier work:
– Close VSCode, then re-open it in your repository directory.
– Open a Javascript file. Add some long lines and lines with several spaces in between.
– Save the file and see if the file auto-formats on save.
– Go to the menu “View / Problems” window. See if any errors or warnings appear.
– Look for error and warning icons in the lower left-hand side of VSCode’s status bar
– Click on the lines with errors or warnings and fix them.
Example Repository
An example repository with ESLint, Prettier, and Airbnb Base style guide can be found here: github.com/jantonypdx/vscode-eslint-prettier-airbnb
The repository contains a “code-with-issue.js” file with many unfixed issues.
If you:
– clone the repository
– install Visual Studio Code
– install & enable ESLint & Prettier extensions in Visual Studio Code
– then load the repository
You should be able to see and fix the following ESLint errors and warnings directly in Visual Studio Code.
Original code with errors:
Here is a screenshot of original code that was added to the repository before ESLint, Prettier, and Airbnb Base style guide were added.
Notice:
– coding issues
– formatting issues
– VSCode displays ESLint error & warning count in the lower-left status bar.
Suggested fixes:
In Visual Studio Code, if you click on the warning/error count in the status bar -or- click on menu: “View / Problems”, the “Problems” window will open at the bottom of the screen in Visual Studio Code:
Each ESLint or Prettier error or warning now appears in the Problems window.
Additionally, if you save the file, Visual Studio Code’s “format on save” functionality will call Prettier and reformat the file according to the rules defined in Airbnb Base style guide along with any rules you define in the “.eslintrc” and “.prettierrc” files.
This will automatically fix common issues like:
– long lines get wrapped to more readable format
– unchanging “let” variables get converted to “const” variables
– objects and arrays references get converted to using destructuring
– concatenated strings become string literals
etc.
Any error or warning message will show you quick ways to fix the issue or a link to an ESLint definition of the problem. This will help you understand the problem and why it should be fixed.
After code fixes:
After you have fixed all issues and warnings, you should see zeroes in the status bar next to the ESLint error and warning icons. 👍
Conclusion
Now your code is much cleaner. Issues, which you may or may not have known about, are fixed and the file has a consistent format and is easy to read.
It’s a good habit to use ESLint and Prettier to verify and format your code before committing it to a repository. These fixes will make it much easier for you to support your code and debug it in the future.
