After installing the ESLint extension in VSC, I encountered an issue where it was no longer working on the fly for my React project when I introduced Typescript.
In the root of my project, I have a .eslintrc file with the following configuration:
{
"parser": "@typescript-eslint/parser",
"extends": [
"airbnb",
"plugin:@typescript-eslint/recommended"
],
"env": {
"browser": true,
"node": true,
"serviceworker": true
},
"parserOptions": {
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"settings": {
"react": {
"version": "detect"
},
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
},
"rules": {
"@typescript-eslint/indent": ["error", 2],
"indent": "off",
"jsx-a11y/anchor-is-valid": ["error", {
"aspects": ["invalidHref", "preferButton"]
}],
"no-console": ["error", {
"allow": ["error", "info"]
}],
"react/no-danger": 0
}
}
I also have an npm script as follows:
"scripts": {
"eslint": "eslint . --ext .js,.jsx,.ts,.tsx",
},
Running npm run eslint lints the entire project correctly. How can I set up VSC to show red squiggly lines for linting on the fly?