Skip to main content

🚀 VSCode support

To make the VSCode ESLint Extension work better with Sheriff we can enable a few settings. It's advisable to enable them at the workspace level, meaning in the root of the project at .vscode/settings.json

Enable linting on specified file extensions​

.vscode/settings.json
{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}

Typescript support​

Using official ESlint > v9.9.0​

If you are using an eslint.config.ts with ESLint's experimental support for Typescript based configuration files, add this to your workspace's .vscode/settings.json:

.vscode/settings.json
"eslint.options": {
  "flags": ["unstable_ts_config"]
}

Astro support​

For Astro projects, add the astro extension too:

.vscode/settings.json
{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
    "astro"
  ]
}

Avoid "source.organizeImports"​

Sheriff already handles imports sorting, so if you happen to have enabled the VSCode automatic import sorting feature, you should disable it to avoid conflicts:

.vscode/settings.json
"editor.codeActionsOnSave": {
    "source.organizeImports": "never"
}

If you wish, you can automatically fix some ESLint violations on save, including sorting imports:

.vscode/settings.json
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
}