Custom VSCode Linter
Some bugs are hard to notice during code reviews, or can be easily forgotten despite attempts at sharing knowledge across the team. Some of those bugs are also easy for a code linter to flag.
This linter flags common bugs we've encountered, so we can fix them before code review, and without having to remember to check for them.
Install it on VS Code: https://marketplace.visualstudio.com/items?itemName=hchiam.custom-vscode-linter
Examples of things it catches:
Future work / Suggestions:
If you want to understand how it works under the hood:
I suggest you start reading at
function updateDecorations() in src/extension.ts
If you want to experiment with the source code:
- (do the usual steps to download from GitHub and navigate to folder)
npm install (just once inside the folder)
npm run watch (every time you want to test it)
- open folder in VS Code and hit F5 or go to Debug and click on the green triangle play button
- in user settings, you can customize the decoration color.
The key file to edit is
extension.ts (in the
If you want to try it yourself from scratch:
npm install -g yo generator-code
npm install -g vsce
| | │ Welcome to the Visual │
|--(o)--| │ Studio Code Extension │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
| ~ |
´ ` |° ´ Y `
? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? custom-vscode-linter
? What's the identifier of your extension? custom-vscode-linter
? What's the description of your extension? Custom VSCode Linter!
? Initialize a git repository? No
? Which package manager to use? npm
edit package.json (add publisher and repository)
(in VS Code:)
(get token as per steps in references)
edit package.json (update version)
edit package-lock.json (update version)
vsce publish -p <token>
If you keep trying to use the VSIX in VS Code and it doesn't update, check if the extension is disabled.
References I Used: