Custom ESLint and Prettier config with Vue.js support and sensible defaults
[!NOTE]
Starting from v1, this ESLint config uses the ESLint Flat config and is only compatible with ESLint v9+.
If you're looking for the previous version, checkout the README here.
pnpm i -D @pequity/eslint-config eslint prettier
Add an eslint.config.js
(or eslint.config.cjs
if your project is CommonJS) that imports the config
function:
import { config } from '@pequity/eslint-config';
export default [
...config(),
{
// Add custom rules here
},
];
The configuration comes with default settings that extend the neostandard config. You can further customize it by passing an object to the config
function:
Config settings defaults:
Option | Type | Description | Default |
---|---|---|---|
ts | boolean |
Enable TypeScript support | true |
noJsx | boolean |
No jsx rules will be added | true |
noStyle | boolean |
No style rules will be added | true |
semi | boolean |
Use semicolons | true |
vue | boolean |
Enable Vue.js support | true |
vueVersion |
2 or 3
|
Specify the version of Vue.js | 3 |
vitest | boolean |
Enable Vitest support | true |
Example:
config({
ts: false,
vue: true
vueVersion: 3,
vitest: false,
})
Create a prettier.config.js
file with the following content:
import prettierConfig from '@pequity/eslint-config/prettier';
export default prettierConfig;
Add the following ESLint commands to your .package-json
for linting and autofixing:
{
"lint": "eslint \"**/*.{vue,ts,js}\"",
"lint-fix": "eslint --fix \"**/*.{vue,ts,js}\""
}
Ad the following settings to your VS Code project settings for autofix on save:
.vscode/settings.json
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
- Based on neostandard
- Prettier for code formatting
- Plugins
- eslint-plugin-html for linting inline scripts contained in HTML files
- eslint-plugin-vue for linting Vue.js files
- eslint-config-prettier for disabling all rules that conflict with Prettier
-
eslint-plugin-prettier for using Prettier as a code formatter with
eslint --fix
- eslint-plugin-simple-import-sort for auto-fixing imports order
- eslint-plugin-import-x for auto-fixing import/export syntax, and prevent issues with misspelling of file paths and import names
- eslint-plugin-vitest for linting Vitest test files