#nrwl/nx + VS Code + ESLint - Errors highlighting doesn't work - eslint

Question

Linting shows errors in terminal but won't highlight the code in VS Code. ESLint extension is installed.
Running nx lint:
yarn run v1.22.10
$ nx lint
> nx run public:lint [existing outputs match the cache, left as is]
Linting "public"...
/Users/honzachalupa/Projects Repositories/- BrightWorks/darek-na-svatbu/packages/public/src/components/organisms/content-blocks/About.tsx
11:8 warning React Hook useEffect has a missing dependency: 'setNavigationRef'. Either include it or remove the dependency array react-hooks/exhaustive-deps
/Users/honzachalupa/Projects Repositories/- BrightWorks/darek-na-svatbu/packages/public/src/components/organisms/content-blocks/FAQ.tsx
11:8 warning React Hook useEffect has a missing dependency: 'setNavigationRef'. Either include it or remove the dependency array react-hooks/exhaustive-deps
/Users/honzachalupa/Projects Repositories/- BrightWorks/darek-na-svatbu/packages/public/src/components/organisms/content-blocks/HowItWorks.tsx
11:8 warning React Hook useEffect has a missing dependency: 'setNavigationRef'. Either include it or remove the dependency array react-hooks/exhaustive-deps
/Users/honzachalupa/Projects Repositories/- BrightWorks/darek-na-svatbu/packages/public/src/components/organisms/forms/EventCreate_Step1.tsx
52:20 warning Forbidden non-null assertion #typescript-eslint/no-non-null-assertion
/Users/honzachalupa/Projects Repositories/- BrightWorks/darek-na-svatbu/packages/public/src/components/organisms/forms/EventCreate_Step2.tsx
53:17 warning Forbidden non-null assertion #typescript-eslint/no-non-null-assertion
/Users/honzachalupa/Projects Repositories/- BrightWorks/darek-na-svatbu/packages/public/src/helpers/firebase.ts
41:5 warning Forbidden non-null assertion #typescript-eslint/no-non-null-assertion
/Users/honzachalupa/Projects Repositories/- BrightWorks/darek-na-svatbu/packages/public/src/pages/Event/Checkout/Checkout.tsx
106:43 warning Forbidden non-null assertion #typescript-eslint/no-non-null-assertion
110:50 warning Forbidden non-null assertion #typescript-eslint/no-non-null-assertion
/Users/honzachalupa/Projects Repositories/- BrightWorks/darek-na-svatbu/packages/public/src/pages/Event/Detail/Detail.tsx
64:30 warning Forbidden non-null assertion #typescript-eslint/no-non-null-assertion
/Users/honzachalupa/Projects Repositories/- BrightWorks/darek-na-svatbu/packages/public/src/pages/Event/Detail/components/Catalog/Catalog.tsx
134:35 warning Forbidden non-null assertion #typescript-eslint/no-non-null-assertion
265:49 warning Forbidden non-null assertion #typescript-eslint/no-non-null-assertion
/Users/honzachalupa/Projects Repositories/- BrightWorks/darek-na-svatbu/packages/public/src/pages/Event/Edit/Edit.tsx
28:32 warning Forbidden non-null assertion #typescript-eslint/no-non-null-assertion
✖ 12 problems (0 errors, 12 warnings)
———————————————————————————————————————————————
> NX SUCCESS Running target "lint" succeeded
Nx read the output from cache instead of running the command for 1 out of 1 tasks.
> NX CLOUD See run details at https://nx.app/runs/jfvJdo71MxA
✨ Done in 1.27s.
package.json dependencies:
...,
"dependencies": {
"#firebase/firestore": "^3.4.1",
"#react-pdf/renderer": "^2.0.21",
"core-js": "^3.20.0",
"firebase": "^9.6.1",
"firebase-admin": "^10.0.1",
"firebase-functions": "^3.16.0",
"logrocket": "^2.1.2",
"moment": "^2.29.1",
"polished": "^4.1.3",
"react": "17.0.2",
"react-day-picker": "^7.4.10",
"react-dom": "17.0.2",
"react-hook-form": "^7.22.2",
"react-icons": "^4.3.1",
"react-is": "17.0.2",
"react-qr-code": "^2.0.3",
"react-responsive-carousel": "^3.2.22",
"regenerator-runtime": "0.13.9",
"styled-components": "5.3.3",
"tslib": "^2.3.1",
"usehooks-ts": "^2.1.1"
},
"devDependencies": {
"#angular-devkit/schematics": "^13.1.2",
"#babel/core": "7.16.5",
"#babel/preset-typescript": "7.16.5",
"#nrwl/cli": "13.3.9",
"#nrwl/cypress": "13.3.9",
"#nrwl/eslint-plugin-nx": "13.3.9",
"#nrwl/jest": "13.3.9",
"#nrwl/linter": "13.3.9",
"#nrwl/node": "^13.3.9",
"#nrwl/nx-cloud": "latest",
"#nrwl/react": "13.3.9",
"#nrwl/storybook": "13.3.9",
"#nrwl/tao": "13.3.9",
"#nrwl/web": "13.3.9",
"#nrwl/workspace": "13.3.9",
"#storybook/addon-essentials": "~6.4.9",
"#storybook/addon-storyshots": "^6.4.9",
"#storybook/builder-webpack5": "~6.4.9",
"#storybook/manager-webpack5": "~6.4.9",
"#storybook/react": "~6.4.9",
"#svgr/webpack": "^6.1.2",
"#testing-library/react": "12.1.2",
"#testing-library/react-hooks": "7.0.2",
"#types/jest": "27.0.3",
"#types/node": "17.0.0",
"#types/react": "17.0.37",
"#types/react-dom": "17.0.11",
"#types/react-is": "17.0.3",
"#types/styled-components": "5.1.18",
"#typescript-eslint/eslint-plugin": "~5.7.0",
"#typescript-eslint/parser": "~5.7.0",
"assert": "^2.0.0",
"babel-jest": "27.4.5",
"babel-loader": "8.2.3",
"babel-plugin-styled-components": "2.0.2",
"browserify-zlib": "^0.2.0",
"buffer": "^6.0.3",
"cypress": "^9.1.1",
"eslint": "8.5.0",
"eslint-config-prettier": "8.3.0",
"eslint-plugin-cypress": "^2.12.1",
"eslint-plugin-import": "2.25.3",
"eslint-plugin-jsx-a11y": "6.5.1",
"eslint-plugin-react": "7.27.1",
"eslint-plugin-react-hooks": "^4.3.0",
"jest": "27.4.5",
"jest-styled-components": "^7.0.8",
"prettier": "^2.5.1",
"react-test-renderer": "17.0.2",
"stream-browserify": "^3.0.0",
"ts-jest": "27.1.2",
"typescript": "~4.5.4",
"url-loader": "^4.1.1",
"workbox-webpack-plugin": "^6.4.2"
}
}
Workspace's .eslintrc.json:
"root": true,
"ignorePatterns": ["**/*"],
"plugins": ["#nrwl/nx"],
"overrides": [
{
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
"rules": {
"#nrwl/nx/enforce-module-boundaries": [
"error",
{
"enforceBuildableLibDependency": true,
"allow": [],
"depConstraints": [
{
"sourceTag": "*",
"onlyDependOnLibsWithTags": ["*"]
}
]
}
],
"react/jsx-pascal-case": 0
}
},
{
"files": ["*.ts", "*.tsx"],
"extends": ["plugin:#nrwl/nx/typescript"],
"rules": {
"#typescript-eslint/ban-ts-comment": 0,
"#typescript-eslint/no-explicit-any": 0,
"#typescript-eslint/no-empty-function": 0
}
},
{
"files": ["*.js", "*.jsx"],
"extends": ["plugin:#nrwl/nx/javascript"],
"rules": {}
}
]
}
Project's .eslintrc.json:
"extends": ["plugin:#nrwl/nx/react", "../../.eslintrc.json"],
"ignorePatterns": ["!**/*"],
"overrides": [
{
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
"parserOptions": {
"project": ["apps/public/tsconfig.*?.json"]
},
"rules": {}
},
{
"files": ["*.ts", "*.tsx"],
"rules": {}
},
{
"files": ["*.js", "*.jsx"],
"rules": {}
}
]
}

Answer 1

Not sure if it's the same problem, but I managed to at least format the code on save, even if it's not showing the errors.
I changed my settings.json on VSCode to add editor.defaultFormatter, and my typescript settings looks like this:
"[typescript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll": true,
}
},