@bitfactory/eslint-config

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

[!IMPORTANT]
From ESLint v9 the Flat Config file is the default. Because of this change update the package.json npm run scripts!

See also the Release Roadmap https://github.com/bitfactory-nl/shared-npm-eslint-config-bitfactory/issues/83

For now the eslint scripts can only be run with the ESLINT_USE_FLAT_CONFIG=false environment variable set like this. For examples how to add this to the package.json, please check out the CLI usage documentation.

• @bitfactory/eslint-config
  • :technologist: Development
  • :package: Installing
    • Vue.js projects
    • TypeScript projects
    • Vue.js, TypeScript and regular JavaScript together
  • :rocket: CLI usage
  • :pencil2: Editor / IDE integration
    • Visual Studio Code
      • Additional Extensions
    • PhpStorm

:technologist: Development

Publishing

Before publishing a new version:

1. Update the version number in the package.json file.
2. And also update the badges in the README.md file, even for patches.
3. Create a new release, after merging the PR. This will trigger a workflow.
4. The GitHub action workflow will then automatically create a new NPM package.

:package: Installing

Include the config into your project:

make npm "i @bitfactory/eslint-config --save-dev --save-exact"

make pnpm "i @bitfactory/eslint-config --save-dev --save-exact"

Then install the dependencies that the config needs:

make npx "install-peerdeps --dev --extra-args="-E" @bitfactory/eslint-config"

make pnpm dlx "install-peerdeps --dev --extra-args="-E" @bitfactory/eslint-config"

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

module.exports = {
    extends: ['@bitfactory'],
};

Vue.js projects

To use this config with a Vue.js project also install the following packages:

make npm "i eslint-plugin-vue eslint-plugin-vuejs-accessibility --save-dev --save-exact"

make pnpm "i eslint-plugin-vue eslint-plugin-vuejs-accessibility --save-dev --save-exact"

And set the following extend in .eslintrc.js:

module.exports = {
    extends: ['@bitfactory/eslint-config/vue'],
};

NOTE: Vue3 needs some extra configuration

make npm "i @vue/eslint-config-typescript --save-exact --save-dev"

make pnpm "i @vue/eslint-config-typescript --save-exact --save-dev"

And set the following extend in .eslintrc.js:

module.exports = {
    extends: [
        '@bitfactory/eslint-config/vue',
        'plugin:vue/vue3-recommended', // <-- add this one
        '@vue/typescript/recommended', // <-- and this one
        '@bitfactory/eslint-config/typescript',
    ],
};

TypeScript projects

To use this config with a TypeScript project also install the following packages

make npm "i @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-import --save-dev --save-exact"

make pnpm "i @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-import --save-dev --save-exact"

And set the following extend in .eslintrc.js:

module.exports = {
    extends: ['@bitfactory/eslint-config/typescript'],
};

Vue.js, TypeScript and regular JavaScript together

To use this config with a Vue.js, TypeScript and regular JavaScript project also install the following packages

make npm "i eslint-plugin-vue eslint-plugin-vuejs-accessibility @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-import @vue/eslint-config-typescript --save-dev --save-exact"

make pnpm "i eslint-plugin-vue eslint-plugin-vuejs-accessibility @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-import @vue/eslint-config-typescript --save-dev --save-exact"

And set the following extend in .eslintrc.js:

module.exports = {
    extends: [
        '@bitfactory/eslint-config/vue',
        'plugin:vue/vue3-recommended',
        '@vue/typescript/recommended',
        '@bitfactory/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_USE_FLAT_CONFIG=false eslint 'path/to/your/assets/**/*.{cjs,js,mjs}'",
  "eslint:fix": "npm run eslint -- --fix"
}

"scripts": {
  "eslint": "ESLINT_USE_FLAT_CONFIG=false eslint 'path/to/your/assets/**/*.{cjs,js,mjs}'",
  "eslint:fix": "pnpm run eslint --fix"
}

To also check Vue.js files:

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

"scripts": {
  "eslint": "ESLINT_USE_FLAT_CONFIG=false eslint 'path/to/your/assets/**/*.{cjs,js,mjs,vue}'",
  "eslint:fix": "pnpm run eslint --fix"
}

Or TypeScript files:

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

"scripts": {
  "eslint": "ESLINT_USE_FLAT_CONFIG=false eslint 'path/to/your/assets/**/*.{cjs,js,mjs,ts,tsx}'",
  "eslint:fix": "pnpm run eslint --fix"
}

You can run the commands with:

make npm run eslint
make npm run eslint:fix

make pnpm run eslint
make pnpm run eslint:fix

With PNPM you can also run scripts without 'run' like make pnpm eslint.

: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. Add the following settings via Code → Preferences → Settings
3. Get linting :rocket:

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

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.

PhpStorm

Go to Preferences | Languages & Frameworks | JavaScript | Code Quality Tools | ESLint and set it to Automatic ESLint configuration

1. Install the File Watchers plugin when not installed
2. Add a new watcher in Preferences | Tools | File Watchers (<custom>) with the follow data:

Name: ESLint
File type: Any
Scope: Project files
Program: $ProjectFileDir$/node_modules/.bin/eslint
Arguments: --fix $FilePath$
Output paths to refresh: $FileDir$
- Working directory & Environment variables -
Working directory: $ProjectFileDir$

You can also select JavaScript, Vue.js or TypeScript files for File type, and copy the watcher for each needed file to only check those files

Or import the following xml file:

<TaskOptions>
    <TaskOptions>
        <option name="arguments" value="--fix $FilePath$" />
        <option name="checkSyntaxErrors" value="true" />
        <option name="description" />
        <option name="exitCodeBehavior" value="ERROR" />
        <option name="fileExtension" value="*" />
        <option name="immediateSync" value="true" />
        <option name="name" value="ESLint" />
        <option name="output" value="$FileDir$" />
        <option name="outputFilters">
            <array />
        </option>
        <option name="outputFromStdout" value="false" />
        <option name="program" value="$ProjectFileDir$/node_modules/.bin/eslint" />
        <option name="runOnExternalChanges" value="true" />
        <option name="scopeName" value="Project Files" />
        <option name="trackOnlyRoot" value="false" />
        <option name="workingDir" value="$ProjectFileDir$" />
        <envs />
    </TaskOptions>
</TaskOptions>