eslint config

Install

Run the following from the project's root:

npm install eslint-config-kswedberg --save-dev

or:

yarn add eslint-config-kswedberg --dev

Then, add the config to the project's eslint.config.x or .eslintrc.js file as described in one of the usage sections below.

Notes

• As of version 6.0.0, this package installs @stylistic/eslint and updates all the formatting rules to use the plugin instead of ESLint core. This is to prepare for ESLint's deprecation of formatting rules.

FLAT CONFIG

JavaScript (ES6+)

import jsConfig from 'eslint-config-kswedberg/flat/js.mjs';

export default [
  ...jsConfig,
];

Vue 3

import vueConfig from 'eslint-config-kswedberg/flat/vue.mjs';

export default [
  ...vueConfig,
];

Nuxt 3

You can use the Nuxt config in one of two ways…

With @nuxt/eslint (recommended):

import nuxtConfig from 'eslint-config-kswedberg/flat/nuxt.mjs';
import withNuxt from './.nuxt/eslint.config.mjs';

export default withNuxt(
  ...nuxtConfig,
  // append project-specific configs
  // {
  //
  // }
);

Using this config by itself:

import nuxtConfig from 'eslint-config-kswedberg/flat/nuxt.mjs';

export default [
  ...nuxtConfig,
];

Globals

For the sake of completion, this repo offers configs for browser and node.js globals:

import {browserGlobals, nodeGlobals} from 'eslint-config-kswedberg/flat/globals.mjs';

export default {
  browserGlobals,
  nodeGlobals,
  // other configs
};

For Vue and Nuxt globals, you're probably better off using a separate plugin. Consider @nuxt/eslint or nuxt-eslint-globals instead. The ones included in this repo are static lists, so they are prone to become outdated. If you really want to use them, you can do so like this:

// Vue-only globals
import {vueGlobals} from 'eslint-config-kswedberg/flat/globals.mjs';

export default [
  vueGlobals,
  // other configs
];

// Vue AND Nuxt globals
import {nuxtGlobals} 'eslint-config-kswedberg/flat/globals.mjs'

export default [
  nuxtGlobals,
  // other configs
];

LEGACY CONFIG

• Deprecation Notice: As of version 6 of this package, the legacy config files are deprecated in favor of the flat config.
• ESLint supports a few different formats for the ...rc file, including JavaScript, JSON, and YAML. You may use any format that eslint supports.

Plain JavaScript

For linting with modern ECMAScript (JS) features enabled:

module.exports = {
  extends: ['kswedberg']
};

Vue & Nuxt

For Vue features, you have a few options for the extends value:

• Nuxt 3.x: kswedberg/nuxt3
• Vue 3.x (without Nuxt): kswedberg/vue3
• Vue 2.x: kswedberg/vue

Tips

• For all Vue or Nuxt versions, you'll need to install the eslint-plugin-vue plugin.
• For Nuxt 3 config, you'll probably want to include the @nuxt/eslint-config as well: ['@nuxt/eslint-config', 'kswedberg/nuxt3']
• Nuxt 3 provides helper functions, composables, and Vue APIs as "auto-imports." While convenient, using them as such will trigger ESLint undefined-variable warnings. The kswedberg/nuxt3 config adds a number of them to the list of globals, but it doesn't cover everything, and doesn't attempt to include those created in your project's composables, components, or server/utils directories. For a robust solution to this problem, install the nuxt-eslint-globals module.

React

If you want React (as well as es6) features enabled, change the extends value to kswedberg/react.

You'll need to have eslint-plugin-react installed.

Legacy JS

If your project requires ancient browser compatability, use the es5 config:

module.exports = {
  'extends': ['kswedberg/es5']
};

Disabling rules per file or line

I always forget how to do this, so I'm writing it down as a reminder to me. See more at Configuring ESLint

• Start disabling all rules for a file: /* eslint-disable */
• Enable rules later in same file: /* eslint-enable */
• Disable specific rules: /* eslint-disable no-alert, no-console */
• Disable all rules for current line (comment to the right): // eslint-disable-line
• Disable specific rules for current line: // eslint-disable-line no-alert, quotes, semi
• Disable all rules for next line: // eslint-disable-next-line
• Disable specific rules for next line: // eslint-disable-next-line no-alert, quotes, semi