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

• eslint-config-typescript-boapi
  • Installing
  • Setup VS code
  • Conclusion

Installing

npx install-peerdeps --dev eslint-config-typescript-boapi

1. You can see in your package.json there are now all dependencies installed you need to lint and prettify yor TypeScript code
2. 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"
  ],
}

3. Add scripts to your package.json

"scripts": {
  "lint": "eslint .",
  "lint:fix": "eslint . --fix"
},

Setup VS code

1. Install ESLint Extension
2. 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.