Linting helps find errors earlier.
Adopting a common style guide stops on-going debates about code style.
Linting and code formatting can be added to projects in many ways:
- Live feedback in text editor that validates code as it is written and provides immediate feedback
- CLI integration that can validate and format code via commands executed from the command line
- Format-on-save functionality that validates and formats code automatically when saved
- Format-on-commit functionality that validates and formats code automatically when committed to source control using a git hook
- Format-on-push functionality built into a CI/CD pipeline that validates and formats code automatically when pushing to source control
This story will focus on text editor integration and CLI command execution.
ESLint helps find and fix problems in JavaScript code. It exposes bugs and style errors, as well as offering opinions about syntax.
Django recommends ESLint when working with JavaScript files, and also recommends installing an ESLint plugin into your text editor.
When setting up ESLint, you are asked to choose a default style guide. I've chosen the Airbnb style guide because it's a very popular, with 117k stars on github. It's been around quite a while and it's the one I've been personally using for a long time. Here's a comparison between Airbnb, Google, and Standard style guides.
Additionally, we've added the official ESLint plugin for Vue.js: eslint-plugin-vue. This will specifically expose syntax errors, the wrong uses of Vue.js Directives, and violations of the Vue.js Style Guide.
And finally we've added Prettier, an opinionated code formatter. This is another very popular library - 41.3k stars on github. It complements ESLint, the Airbnb style guide, and the Vue.js plugin.
ESLint official Getting Started page
ESLint has been added to the package.json in /regulations/static/, including vue, airbnb, and prettier plugins.
.eslintrc.json has been created in /regulations/static/. It is mainly boilerplate but adds the Airbnb style guide, the Vue.js plugin, and Prettier.
.prettierrc.json has been created for any overrides that we want to add. Right now, it overrides tabWidth to be 4 spaces.
.prettierignore has been created because it was recommended by the Prettier docs. It includes an incomplete list of file types and directories to ignore when running Prettier from the command line.
The best way to start using ESLint is to integrate it into your text editor so you get immediate feedback while writing code. You can manually fix these alerts yourself, or use CodeActions to automatically fix all fixable problems.
Typical workflow for using ESLint and Prettier in your text editor:
- Write code
- See real-time validation alerts
- Manually change code to satisfy linter and make validation alerts disappear OR
- Execute ESLint and Prettier code actions/keyboard shortcuts to automatically fix and format entire file
ESLint official Integrations page
Note: ESLint 8 had some breaking changing that editor plugins are only now resolving. See notes below about plugin versions needed.
Prettier official Editor Integration page
Make sure you install ESLint v2.2.x.
Note: If there are issues installing the above version, you may need to install a pre-release version from VSIX, as outlined in the comment:
Why 2.2.0 needs to be installed
Note: For the same reason that a pre-release build must be used for VSCode above, a custom coc eslint plugin must also be installed for now: coc-eslint8
Configuring ESLint and Prettier for Vim with ALE
Prettier plugin for use with ALE
Official ESLint Command Line Interface page
To run ESLint from the command line, you may need to install eslint globally on your machine:
npm i -g eslint
There are many options from which to choose.
To use as a diagnostic tool to see problems without fixing them, use --fix-dry-run:
eslint --fix-dry-run ./regulations/js/main.js