Althea Web Service's eslint
configuration.
You can view this package on NPM: click here
This package supports the following by default out of the box:
-
eslint-config-airbnb
- React with hooks support -
eslint-config-prettier
- Prettier support. Prettier configs will override the ESLint rules associated with style choices. In other words,Pretter > ESLint
. -
eslint-plugin-vue
- Vue support
This package also has the option for supporting TypeScript projects as well:
-
eslint-config-airbnb-typescript
- React with hooks support - Everything else above!
npm install --save-dev eslint-config-altheajs
yarn add --dev eslint-config-altheajs
The simplest way to install and use the default config is to reference it directly in your package.json
file as follows:
{
// ...package.json
"eslintConfig": {
"extends" : ["altheajs"]
}
}
If you'd like to extend the configurations, create a .eslintrc.js
file at the root of your project that contains the following:
module.exports = {
"extends": ["altheajs"], // you can omit "eslint-config-"
// if using typescript
"parserOptions": { "project": "./tsconfig.json" }
// ...more custom config overrides
};
If you're using a typescript project, you can use the exported TypeScript ESLint configuration.
{
// ...package.json
"eslintConfig": {
"extends": ["altheajs/typescript"]
}
}
Since this package already bundles the eslint-config-prettier
package under the hood, there is no need to install the dependency yourself. You can use your Prettier config as you would normally in your project, and ESLint will prefer Prettier for style changes over its own.
You can add in an npm script to your package.json
which will apply lint rules across all the file patterns specified. Simply add the following to apply to all files:
{
// ...package.json
"scripts": {
// check for linting errors
"lint:quality": "npx eslint -c .eslintrc.js . --ext .js,.jsx,.ts,.tsx"
// fix and apply the rules to those that can be fixed
"fix:quality": "npx eslint -c .eslintrc.js . --ext .js,.jsx,.ts,.tsx --fix",
}
}
-
Install ESLint extension:
View → Extensions
then find and install the ESLint extension. -
Reload the editor.
-
In your user settings
Code -> Preferences -> Settings
add the following settings:{ // ...settings.json "editor.codeActionsOnSave": { "source.fixAll.eslint": true } }
Check out all of ESlint's configuration options.