JS Linting
Linter as code style enforcement
This style guide focuses on component and test design rather than making an exhaustive list of prescriptions. To manage more microscopic aspects of JS code style, we rely on our linters.
- On local commits, husky runs our pre-commit hook, which includes prettier, stylelint and detect-secrets.
- On pushes upstream, CircleCI runs the mainline CI/CD pipeline, which includes the client-linting step (eslint + stylelint). Lint errors will block merging/deployment to both staging and master.
JS lint rules and config files
If you’re interested, you can find our lint rules at the following:
pre-commit:
prettier:
eslint:
- https://github.com/groveco/grove/blob/master/.eslintrc.json
- https://eslint.org/docs/rules/
- https://eslint.vuejs.org/rules/#priority-c-recommended-minimizing-arbitrary-choices-and-cognitive-overhead-for-vue-js-2-x
- https://github.com/cypress-io/eslint-plugin-cypress#rules
Linting in VSCode
Configuring your editor will raise your awareness of our code style through lint errors. It isn’t vital to address every error while you are editing code — pre-commit should handle some portion of the errors for you. However, if you see errors and warnings in your editor after running pre-commit, please address them.
Inside VSCode, install the following plugin and provide it permission to execute for your workspace (Cmd + Shift + P and select ESLint: Manage Library Execution, if you don’t see the dialog pop up).
Plugin: ESLint (Id: dbaeumer.vscode-eslint)
Troubleshooting: https://dev.to/tillsanders/eslint-not-working-in-vscode-help-build-a-troubleshooting-checklist-fdc
You can also save some time by installing the prettier plugin and configuring Format Document to run on save. Otherwise you may find pre-commit forcing you to run git commands twice when your code needs formatting.
Plugin: Prettier (Id: esbenp.prettier-vscode)
Configuring to run on save: https://scottsauber.com/2017/06/10/prettier-format-on-save-never-worry-about-formatting-javascript-again/
If you just want to run on command, the shortcut is Shift+Option+F on Macs.
Auto-formatting via pre-commit
Make sure you have pre-commit installed (instructions at https://groveco.github.io/style/python#tooling). Once installed, pre-commit will auto-format your js on commit.
Checking for remaining errors
On occasion, lint errors remain in your code even after pre-commit has run. Warnings do not block your code from being deployed to staging nor merged, but lint errors do. Circle CI will show the errors in the client-linting step, but you can also check prior to pushing your changes up with
npm run lint