Photo by Pankaj Patel on Unsplash

When appropriately configured, ESLint and Prettier can optimize your TypeScript development workflow in Visual Studio Code. Getting things set up correctly can be a bit challenging, but hopefully, this guide will help. The examples below will use the popular Airbnb preset with modifications to make it work with TypeScript and Prettier.

Install the required dependencies

Configure your .eslintrc.js

module.exports = {

extends: ['airbnb', 'plugin:@typescript-eslint/recommended'],

parser: '@typescript-eslint/parser',

plugins: ['@typescript-eslint', 'prettier'],

settings: {

'import/parsers': {

'@typescript-eslint/parser': ['.ts', '.tsx'],

},

'import/resolver': {

typescript: {},

},

},

rules: {

'react/jsx-filename-extension': [2, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],

'import/no-extraneous-dependencies': [2, { devDependencies: ['**/test.tsx', '**/test.ts'] }],

'@typescript-eslint/indent': [2, 2],

},

};

Add the following to your package.json

"scripts": {

"lint": "eslint . --ext .js,.jsx,.ts,.tsx"

}

At this point, ESLint will work correctly with TypeScript. You can lint your project’s JavaScript and TypeScript files by running yarn lint . While this is helpful, there are only a few more configuration changes required to get full integration with Visual Studio Code.

Install the following Visual Studio Code extensions

dbaeumer.vscode-eslint

esbenp.prettier-vscode

Add the following to your Visual Studio Code settings.json

"[javascript]": {

"editor.defaultFormatter": "esbenp.prettier-vscode",

"editor.formatOnSave": false

},

"[javascriptreact]": {

"editor.defaultFormatter": "esbenp.prettier-vscode",

"editor.formatOnSave": false

},

"[typescript]": {

"editor.defaultFormatter": "esbenp.prettier-vscode",

"editor.formatOnSave": false

},

"[typescriptreact]": {

"editor.defaultFormatter": "esbenp.prettier-vscode",

"editor.formatOnSave": false

},

"eslint.autoFixOnSave": true,

"eslint.validate": [

"javascript",

"javascriptreact",

{

"autoFix": true,

"language": "typescript"

},

{

"autoFix": true,

"language": "typescriptreact"

}

],

"prettier.eslintIntegration": true,

And that’s it! You should now have complete Visual Studio Code integration. When you violate a linting rule, you’ll be visually alerted, and when you save a file, ESLint will attempt to fix any issues using Prettier. This should work for both JavaScript and TypeScript.