This post is about configuring a linter, git hooks and auto-format on VS Code in order to improve our development workflow. This configuration can be used for any project, but in that particular case I’ll add specific linting rules that applly to our Alexa Skill’s code. In order to cover all the linting options and functionality we want to configure the linter on different points of our workflow:
npm run lintto be run linter on demand.
- Create git hook
precommitto run our linter using husky and lint-staged
- Create git hook
prepushto run our test framework using husky
There are different methods and options to consider when we want to add linting to our projects:
- Prettier: that is a good option for automatically format our code (but at the same time is quite risky as it will decide for you eventually)
- Eslint: that is really configurable by using rule sets, and it also integrates really well with VS Code auto-format via eslint extension for VS Code.
I’m going to use eslint for that project
Run this command:
npm i -D eslint husky lint-staged eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard
"lint": "eslint .",
"prepush": "npm run test"
Add lint-staged section. Apply to all
*.jsfiles that have been committed and run firstly
npm run lintand then
git add. Then before doing the git commit the linter is going to run. If the linter fails, then
git commitwill not be done.
As part of eslint configuration we should add
.eslintrc file. For the specific scenario of Alexa Skill, that is the set of rules that better works for our team:
In order to make sure we are not linting external files and libraries we should ignore
node_modules folder using
If we are using VS Code, we also can suggest or recommend some extensions which will help providing “live lintint” on the files opened by VS Code.
We can add under
.vscode folder, a file called
extensions.json with that object on it:
Then, when a new developer opens that project, will be suggested to install
Note: Eslint VS Code extension will also use our
.eslintrcrules when we use auto-formating on our files, applying as many rules as it can.
VS Code Auto-Formatting shortcuts:
MacOS: ⇧ + ⌥ + F
Windows: Shift + Alt + F
Linux: Control + Shift + I
This configuration is not only for Alexa Skill project, we use it in some of our JS, React and NodeJS projects and it really helps on improving our development workflow performance. Having that configuration in our project will help on:
- Running linter on demand ->
npm run lint
- Running linter before commit ->
- Running tests before push ->
- Running linter on each file in live (using VS Code Extension) and being able to solve some issues with auto-formatting.