1

I made a typescript react app where I would like to use my eslintrc file to lint my files in vs code but the warnings are not showing up in the ide.

My eslintrc:

{
    "extends": ["react-app"],
    "rules": {
      "space-infix-ops": ["warn", { "int32Hint": false }],
      "semi": ["warn", "never"],
      "quotes": ["warn", "single"],
      "jsx-quotes": ["warn", "prefer-single"],
      "no-trailing-spaces": ["warn"],
      "comma-dangle": ["warn", "never"],
      "space-before-function-paren": ["warn", "never"],
      "space-before-blocks": "warn",
      "keyword-spacing": ["warn", { "after": true, "before": true, 
        "overrides": { 
          "if": { "after": false },
          "else": { "after": true },
          "switch": { "after": false },
          "case": {"after": true },
          "for": { "after": false }
          }
        }
      ],
      "key-spacing": [ "warn", { "afterColon": true }],
      "no-multi-spaces": ["warn"],
      "no-console": ["warn"]
    }
  }

my settings.json:

{
    "editor.fontSize": 15,
    "eslint.enable": true,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        { "language": "typescript", "autoFix": true },
        { "language": "typescriptreact", "autoFix": true }
    ],
}

Output tab:

[Info  - 6:07:05 PM] ESLint server stopped.
[Info  - 6:07:05 PM] ESLint server running in node v8.9.3
[Info  - 6:07:05 PM] ESLint server is running.
(node:622) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): SyntaxError: Unexpected token {
(node:622) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:622) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): SyntaxError: Unexpected token {
(node:622) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 3): SyntaxError: Unexpected token {
(node:622) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 4): SyntaxError: Unexpected token {
(node:622) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 5): SyntaxError: Unexpected token {
(node:622) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 6): SyntaxError: Unexpected token {
(node:622) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 7): SyntaxError: Unexpected token {
(node:622) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 8): SyntaxError: Unexpected token {
(node:622) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 9): SyntaxError: Unexpected token {
(node:622) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 10): SyntaxError: Unexpected token {
(node:622) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 11): SyntaxError: Unexpected token {
(node:622) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 12): SyntaxError: Unexpected token {
(node:622) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 13): SyntaxError: Unexpected token {
(node:622) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 14): SyntaxError: Unexpected token {

I do have the eslint extension installed.

I installed eslint locally for the project with npm install eslint --save-dev

I have googled and looked at other peoples issues but cannot seem to get it working for me. Any help in the right direction would be appreciated.

Thanks

Tamjid
  • 4,326
  • 4
  • 23
  • 46

2 Answers2

0

Check the Output tab on the bottom half of the screen. Select ESLint from the dropdown. Or use the Shortcut: ctrl + shift + U on windows. All ESLint server output gets drawn there.

tlt
  • 358
  • 4
  • 10
  • Thanks for the reply @denkquer i have attached the output to the quesiton but i cannot nmake any sense of it – Tamjid Jan 26 '21 at 09:40
  • @Tamjid well obviously something is wrong with the syntax of your configuration. The attached config looks good to me tho. – tlt Jan 26 '21 at 10:36
0

I suppose you are asking about the red lines warnings which appear on VS code like the following

ESLint Error

So to get such red error eslint warnings, it was pretty quick fix for my system.

Step 1 : Go to VS Code settings Step 2 : Search for "eslint" Step 3 : Look for Eslint:Enable and tick the checkbox step 3

Extras : Step 4 : Look ouot for formatter by scrolling down and tick it as well. setp 4

Final step 5 : Reload your VS code.

One tip : Right click on your file and select 'Format Document with....' and do 'Configure default formatter' and select ESLint' over there by which you'll be benefitted by the complete ESLint environment only if you wish to.

If you have all the eslint installation, configuration and official extension by microsoft properly installed then your things will start working.

All the best looking at the erros and happy coding :)