How can I get rid of the red underlines on warnings in VSCode?

Question 1

This is a new issue that I have been dealing with on my personal computer at home. This issue has started, I think, when I first started using React. This makes me wonder if it has something to do with package.json or something with eslint. Im not sure if its something I can fix with modifying my settings.json file or .eslintrc.cjs file.

I want the red underlines on errors, not warnings.

For example, in my code below, it is giving me a red underline, and when I hover over it it states:

'setWork' is decalared but its value is never read. ts(6133)
'setWork' is assigned a value but never used. eslint(nounused-vars)

package.json:

{
  "name": "cv",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.56",
    "@types/react-dom": "^18.2.19",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.56.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "vite": "^5.1.4"
  }
}

.eslintrc.cjs:

module.exports = {
    root: true,
    env: {browser: true, es2020: true},
    extends: [
        'eslint:recommended',
        'plugin:react/recommended',
        'plugin:react/jsx-runtime',
        'plugin:react-hooks/recommended',
    ],
    ignorePatterns: ['dist', '.eslintrc.cjs'],
    parserOptions: {ecmaVersion: 'latest', sourceType: 'module'},
    settings: {react: {version: '18.2'}},
    plugins: ['react-refresh'],
    rules: {
        'react/jsx-no-target-blank': 'off',
        'react-refresh/only-export-components': [
            'warn',
            {allowConstantExport: true},
        ],
    },
};

settings.json:

{
    "atomKeymap.promptV3Features": true,
    "editor.multiCursorModifier": "ctrlCmd",
    "editor.formatOnPaste": true,
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "git.confirmSync": false,
    "liveServer.settings.donotShowInfoMsg": true,
    "liveServer.settings.wait": 500,
    "prettier.bracketSpacing": false,
    "explorer.confirmDelete": false,
    "php.validate.executablePath": "",
    "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "vue-html": "html",
        "vue": "html"
    },
    "prettier.useTabs": true,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "prettier.jsxSingleQuote": true,
    "editor.formatOnSave": true,
    "prettier.singleQuote": true,
    "livePreview.autoRefreshPreview": "On Changes to Saved Files",
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "workbench.startupEditor": "none",
    "editor.fontSize": 12,
    "liveServer.settings.useLocalIp": true
}

I tried looking though .eslintrc.cjs, package.json, and settings.json file to see if I saw anything about this issue.

I also tried googling the issue, but anything I find tells me that I can get rid of rid lines from warnings AND errors. I just want the red lines gone from warnings and not errors.

Question 2

I just want the red lines gone from warnings and not errors.

This is an error (not a warning) because as the docs say, it’s enabled by your usage of eslint:recommended

Here it is in the code: https://github.com/eslint/eslint/blob/491a1d16a8dbcbe2f0cc82ce7bef580229d09b86/packages/js/src/configs/eslint-recommended.js#L67

You can override it and convert it to a warning in your own eslint config, but it’s a really good rule (imo), just get rid of the unused vars.

Leave a Comment Cancel reply