@zeebats/eslint-config

This is a shareable config for ESLint. All the rules and configurations are already set. Rules can be overridden if needed.

• Installing
  • Vue.js projects
  • TypeScript projects
  • Vue.js and TypeScript together
• CLI usage
• Editor / IDE integration
  • Visual Studio Code
    • Autofix
    • JSON linting
    • Additional Extensions

:package: Installing

Include the config into your project:

npm install @zeebats/eslint-config --save-dev --save-exact

In your project, create an .eslintrc.json file with the following contents:

{
	"extends": ["@zeebats"]
}

Vue.js projects

To use this config with a Vue.js project, set the following extend in .eslintrc.json:

{
	"extends": ["@zeebats/eslint-config/vue"]
}

TypeScript projects

To use this config with a TypeScript project, set the following extend in .eslintrc.json:

{
	"extends": ["@zeebats/eslint-config/typescript"]
}

Vue.js and TypeScript together

To use this config with a Vue.js and TypeScript, set the following extend in .eslintrc.json:

{
	"extends": [
		"@zeebats/eslint-config/vue",
		"@zeebats/eslint-config/typescript"
	]
}

:warning: The order is important here, the TypeScript config needs to be last

Vue 3

Lastly, Vue 3 is the new stable version of Vue since some time. This config supports Vue 3 linting by modifying the "extends" like so:

{
	"extends": [
-		"@zeebats/eslint-config/vue",
+		"@zeebats/eslint-config/vue3",
		"@zeebats/eslint-config/typescript"
	]
}

:rocket: CLI usage

To use ESLint in the command-line, add the following scripts to your projects package.json:

"scripts": {
	"eslint": "eslint 'path/to/your/assets/**/*.js'",
	"eslint:fix": "npm run eslint -- --fix"
}

To also check Vue.js files:

"scripts": {
	"eslint": "eslint 'path/to/your/assets/**/*.{js,vue}'",
	"eslint:fix": "npm run eslint -- --fix"
}

Or TypeScript files:

"scripts": {
	"eslint": "eslint 'path/to/your/assets/**/*.{js,ts,tsx}'",
	"eslint:fix": "npm run eslint -- --fix"
}

You can run the commands with:

npm run eslint
npm run eslint:fix

:pencil2: Editor / IDE integration

For ESLint to work, you need to set up your editor / IDE.

Visual Studio Code

1. Install the ESLint extension
2. Get linting :rocket:

Autofix

If you want Visual Studio Code to autofix your code on save, add this snippet to your settings.json file:

{
	"editor.codeActionsOnSave": {
		"source.fixAll.eslint": true
	}
}

JSON linting

If you want Visual Studio Code to lint JSON files with ESLint, add this snippet to your settings.json file:

{
	"eslint.validate": ["json", "jsonc", "json5"],
}

Additional Extensions

• Error Lens to get inline error messages

:warning: If you have the Prettier extension enabled, make sure to disable the extension for your project's workspace. This is because Prettier's rules will conflict with ours.