eslint-config-typescript-boapi
ESLint config for typescript projects with VS Code.
This repo is heavily inspired by No-Sweat™ Eslint and Prettier Setup from Wes Bos
Installing
npx install-peerdeps --dev eslint-config-typescript-boapi
- You can see in your package.json there are now all dependencies installed you need to lint and prettify yor TypeScript code
- Create a
.eslintrc.js
file in the root of your project's directory (it should live where package.json does). Your.eslintrc.js
file should look like this:
module.exports = {
"extends": [
"typescript-boapi"
],
}
- Add scripts to your
package.json
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix"
},
Setup VS code
- Install ESLint Extension
- Adjust your Settings
// These are all my auto-save configs
"editor.formatOnSave": true,
// turn it off for JS, JSX, TS and TSX, we will do this via eslint
"[javascript]": {
"editor.formatOnSave": false
},
"[javascriptreact]": {
"editor.formatOnSave": false
},
"[typescript]": {
"editor.formatOnSave": false
},
"[typescriptreact]": {
"editor.formatOnSave": false
},
// tell the ESLint plugin to run on save
"eslint.autoFixOnSave": true,
// tell the ESLint plugin which files to run on
"eslint.validate": [
"javascript",
"javascriptreact",
{ "language": "typescript", "autoFix": true },
{ "language": "typescriptreact", "autoFix": true }
],
// Optional BUT IMPORTANT:
// If you have the prettier extension enabled for other languages like CSS and HTML,
// turn it off for JS since we are doing it through Eslint already
"prettier.disableLanguages": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
]
Conclusion
After all is setup, VS Code should now be able to lint and prettify your code.