Turn on transpile-free type hinting for your vanilla JS projects #JSWithTypes
-
Create a plain JavaScript project
npm init
-
Turn on type linting 💪
# Create a properly configured `jsconfig.json` npx -p jswt@2.x -- jswt init # Install @types/node, if needed npm install --save '@types/node'
-
Profit!
Works with VS Code out-of-the-box, and Vim + ale.
Use v1 for CommonJS, or v2 for ESM.
Your project will look something like this:
.
├── bin/
├── jsconfig.json
├── node_modules/
│ └── @types/
│ └── node/
├── package-lock.json
├── package.json
├── README.md
├── types.js
└── typings/
└── overrides/
└── index.d.ts
- Runs
tsc --init
with these options:npx -p typescript@5.x -- \ tsc --init \ --allowJs --alwaysStrict --checkJs \ --module nextnode --moduleResolution nextnode \ --noEmit --noImplicitAny --target es2024 \ --typeRoots './typings,./node_modules/@types'
- Adds the following keys:
"paths": { "foo": ["./foo.js"], "foo/*": ["./*"] }, "include": ["*.js", "bin/**/*.js", "lib/**/*.js", "src/**/*.js"]`, "exclude": ["node_modules"]
- Renames
tsconfig.json
tojsconfig.json
(and creates some placeholder files and dirs)
You may wish to add common script commands for fmt
and lint
:
npm pkg set scripts.lint="npx -p typescript@5.x -- tsc -p ./jsconfig.json"
npm pkg set scripts.fmt="npx -p prettier@3.x -- prettier -w '**/*.{js,md}'"
It should Just Work™, but if your vim setup is a little custom, you may want to add or modify a line like this:
~/.vimrc
:
let g:ale_linters = {
\ 'javascript': ['tsserver', 'jshint'],
\ 'json': ['fixjson']
\}