An opinionated ESLint configuration preset for TypeScript projects, based on
antfu/eslint-config. I use this preset across my personal and professional
projects to maintain a consistent code style and quality.
Additional rules included are:
- Markdown files support via
eslint-plugin-markdown - Vue files support via
eslint-plugin-vue - Tailwind CSS support via
eslint-plugin-better-tailwindcss
To install ESLint and this preset with Bun, run:
bun add --dev eslint @acfatah/eslint-presetThis preset declares eslint, @antfu/eslint-config, @eslint/markdown,
eslint-plugin-better-tailwindcss, eslint-plugin-format, and
eslint-plugin-vue as peer dependencies. Modern package managers, including
Bun, will install these peers automatically when you add the preset, so you do
not need to list each plugin manually in your package.json.
Add eslint.config.ts file with the following content. config is just a wrapper
to the antfu factory function. See antfu Customization
section for more details.
import { config, preset, vue } from '@acfatah/eslint-preset'
export default config(
{
formatters: true,
// Type of the project. 'lib' for libraries, the default is 'app'
type: 'lib',
// Specifically for Vue projects
vue: true,
// Files and directories to ignore. Adjust accordingly.
ignores: [
'**/coverage/**',
'**/dist/**',
'**/logs/**',
'**/tsconfig.*',
'bun.lock',
],
},
{
// Optionally when using some plugins
plugins: {
// ...
},
rules: {
...preset,
// Specifically for Vue projects
...vue,
},
},
)Add the following configurations respectively.
import { betterTailwindcssPlugin, config, tailwind } from '@acfatah/eslint-preset'
import antfu from '@antfu/eslint-config'
export default config(
{
// other configs...
},
{
plugins: {
...betterTailwindcssPlugin,
},
rules: {
// other rules...
...tailwind,
},
settings: {
// See: https://github.com/schoero/eslint-plugin-better-tailwindcss/blob/main/docs/settings/settings.md
'better-tailwindcss': {
// Required to work properly. Adjust accordingly.
entryPoint: 'src/styles/global.css',
// Optional variable names used to store Tailwind class names
variables: ['size', 'variant'],
},
}
},
// other flat configs...
)Install the VS Code ESLint extension.
Add the following vscode configuration to .vscode/settings.json,
File: src/files/.vscode/settings.json
Install the Tailwind CSS IntelliSense extension.
Add the following custom Tailwind CSS v4 functions and directives lines to the .vscode/settings.json file:
{
// other settings...
// Custom Tailwind CSS v4 functions and directives
// See:
// - https://tailwindcss.com/docs/functions-and-directives
// - https://grok.com/share/bGVnYWN5_1cf7d218-282e-46e5-acc6-efb07d12d35e
"css.customData": [
".vscode/tailwind.json"
]
// other settings...
}Then, copy src/files/.vscode/tailwind.json file to .vscode/tailwind.json.
curl -s https://raw.githubusercontent.com/acfatah/eslint-preset/refs/heads/main/src/files/.vscode/tailwind.json -o .vscode/tailwind.json
{ // Disable the default formatter, use eslint instead "prettier.enable": false, "editor.formatOnSave": true, // Auto fix "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit", "source.organizeImports": "never" }, // Silent the stylistic rules in you IDE, but still auto fix them "eslint.rules.customizations": [ { "rule": "style/*", "severity": "off", "fixable": true }, { "rule": "format/*", "severity": "off", "fixable": true }, { "rule": "*-indent", "severity": "off", "fixable": true }, { "rule": "*-spacing", "severity": "off", "fixable": true }, { "rule": "*-spaces", "severity": "off", "fixable": true }, { "rule": "*-order", "severity": "off", "fixable": true }, { "rule": "*-dangle", "severity": "off", "fixable": true }, { "rule": "*-newline", "severity": "off", "fixable": true }, { "rule": "*quotes", "severity": "off", "fixable": true }, { "rule": "*semi", "severity": "off", "fixable": true } ], // Enable eslint for all supported languages "eslint.validate": [ "javascript", "javascriptreact", "typescript", "typescriptreact", "vue", "html", "markdown", "json", "jsonc", "yaml", "toml", "xml", "gql", "graphql", "astro", "svelte", "css", "less", "scss", "pcss", "postcss" ], // https://github.com/tailwindlabs/tailwindcss-intellisense?tab=readme-ov-file#recommended-vs-code-settings "files.associations": { "*.css": "tailwindcss" }, // https://github.com/tailwindlabs/tailwindcss-intellisense?tab=readme-ov-file#recommended-vs-code-settings "editor.quickSuggestions": { "strings": "on" } }