FirstVet ESLint Config

9.0.1 verified Fri May 01 auth: no javascript

FirstVet's shared ESLint configuration (v9.0.1) combining Airbnb base, Prettier, TypeScript, Vue, and Tailwind CSS rules. Extends plugins for import resolution, JSON formatting, and Vue parsing. Released as needed by FirstVet development. Differentiators: opinionated all-in-one config for FirstVet projects, includes autoformatting via ESLint, and requires peer dependencies via install-peerdeps.

Common errors

error Error: Failed to load plugin 'prettier' declared in '.eslintrc.json': Cannot find module 'eslint-plugin-prettier' ↓

cause Peer dependencies not installed.

fix

Run npx install-peerdeps -D eslint-config-firstvet to install all missing peers.

error Error: Cannot find module 'vue-eslint-parser' ↓

cause Missing peer dependency for Vue config.

fix

Install vue-eslint-parser: npm install -D vue-eslint-parser

error Parsing error: The keyword 'import' is reserved ↓

cause Missing @typescript-eslint/parser or incorrect parser configuration.

fix

Ensure @typescript-eslint/parser is installed and no parserOptions overrides it.

error ESLint: TypeError: this.options is not iterable (eslint-plugin-tailwindcss) ↓

cause Incompatible version of eslint-plugin-tailwindcss.

fix

Install eslint-plugin-tailwindcss@^3.18.0 or @^4.0.0-beta.0 (not v2.x).

Warnings

gotcha VSCode autoformatting fails when project is opened in a subdirectory; ESLint plugin cannot find plugins. ↓

fix Open the subdirectory as the project root in VSCode (File > Open Folder) so that node_modules are resolved correctly.

breaking eslint-plugin-tailwindcss requires v3.18.0 or v4.0.0-beta.0; mismatched version causes rule errors. ↓

fix Ensure eslint-plugin-tailwindcss is installed at ^3.18.0 || ^4.0.0-beta.0 as specified in peer dependencies.

deprecated prettier.disableLanguages is deprecated in newer Prettier VSCode extensions; use editor.defaultFormatter instead. ↓

fix Remove prettier.disableLanguages and set editor.defaultFormatter to null for those languages, or use ESLint as the formatter.

gotcha If using eslint-plugin-prettier, conflicting formatting rules may arise if both Prettier and ESLint format on save. ↓

fix Set editor.formatOnSave to false and rely solely on ESLint's fixAll action.

gotcha Path intellisense mapping '@' requires eslint-import-resolver-alias to be configured; otherwise imports may not resolve. ↓

fix Ensure eslint-import-resolver-alias is installed and configured in .eslintrc if using path aliases.

Install

npm install eslint-config-firstvet

yarn add eslint-config-firstvet

pnpm add eslint-config-firstvet

Imports

firstvet
wrong
```
extends: ['eslint-config-firstvet']
```
correct
```
extends: ['firstvet']
```
Use the short name 'firstvet' in eslintrc; the full npm package name also works but is redundant.
firstvet/vue
wrong
```
extends: ['firstvet/vue']
```
correct
```
extends: ['firstvet/vue']
```
Adds Vue-specific rules; requires vue-eslint-parser.
install-peerdeps
wrong
```
npm install eslint-config-firstvet --save-dev (missing peer deps)
```
correct
```
npx install-peerdeps -D eslint-config-firstvet
```
Use npx install-peerdeps to automatically install all peer dependencies, which are many.

Quickstart

Installs peer deps, configures .eslintrc.json for JS or Vue, and sets up VSCode autoformatting on save.

// 1. Install with peer deps (requires npm 5+):
// npx install-peerdeps -D eslint-config-firstvet

// 2. Create .eslintrc.json:
{
  "extends": ["firstvet"]
}

// For Vue projects use:
// { "extends": ["firstvet/vue"] }

// 3. VSCode settings.json:
// {
//   "[javascript]": { "editor.formatOnSave": false, "editor.formatOnPaste": false },
//   "[json]": { "editor.formatOnSave": false, "editor.formatOnPaste": false },
//   "[vue]": { "editor.formatOnSave": false, "editor.formatOnPaste": false },
//   "[typescript]": { "editor.formatOnSave": false, "editor.formatOnPaste": false },
//   "eslint.validate": ["javascript", "json", "vue", "typescript"],
//   "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
//   "prettier.disableLanguages": ["javascript", "json", "vue", "typescript"],
//   "path-intellisense.mappings": { "@": "${workspaceRoot}/src" }
// }