@bitfactory/eslint-config
This is a shareable config for ESLint. All the rules and configurations are already set. Rules can be overridden if needed.
📦 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',
],
};
🚀 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
✏️ Editor / IDE integration
For ESLint to work, you need to set up your editor / IDE.
Visual Studio Code
- Install the ESLint extension
- Add the following settings via
Code
→Preferences
→Settings
- Get linting 🚀
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
Additional Extensions
- Error Lens to get inline error messages
⚠️ 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
- Install the File Watchers plugin when not installed
- 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>