@bitfactory/eslint-config

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

• @bitfactory/eslint-config
  • :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

:package: Installing

Include the config into your project:

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

Then install the dependencies that the config needs:

npx 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:

npm install 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

npm install @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

npm install @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

npm install 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 '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. 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>