Install
eslint-config-algolia
This is Algolia's linting and formatting of
JavaScript projects (Vanilla, React, Vue) repository.
It explains to you how to setup your project to use it and never
worry again about indentation, curly spaces, let vs const etc...
This code style is only as useful as you activate travis for your project
so that it runs linting in your test phase and warns you.
Just focus on coding.
Table of Contents
Setup your project
Base requirements
yarn add \
eslint @babel/eslint-parser prettier \
eslint-config-algolia eslint-config-prettier \
eslint-plugin-import eslint-plugin-prettier \
eslint-plugin-eslint-comments eslint-plugin-jsdoc \
--dev
Vanilla
.eslintrc.js
module.exports = {
extends: 'algolia'
};
package.json
{
"scripts": {
"test": "npm run lint",
"lint": "eslint .",
"lint:fix": "npm run lint -- --fix"
}
}
Jest
We recommend using Jest as a test runner.
terminal
yarn add eslint-plugin-jest --dev
.eslintrc.js
module.exports = {
extends: ['algolia', 'algolia/jest']
};
package.json
{
"scripts": {
"test": "npm run lint",
"lint": "eslint .",
"lint:fix": "npm run lint -- --fix"
}
}
React
terminal
yarn add eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y --dev
.eslintrc.js
module.exports = {
extends: ['algolia', 'algolia/react']
};
package.json
{
"scripts": {
"test": "npm run lint",
"lint": "eslint .",
"lint:fix": "npm run lint -- --fix"
}
}
Flow
terminal
yarn add eslint-plugin-flowtype --dev
.eslintrc.js
module.exports = {
extends: ['algolia', 'algolia/flowtype']
};
Flow with React
terminal
yarn add eslint-plugin-flowtype eslint-plugin-react eslint-plugin-react-hooks --dev
.eslintrc.js
module.exports = {
extends: ['algolia', 'algolia/flowtype', 'algolia/react']
};
package.json
{
"scripts": {
"test": "npm run lint",
"lint": "eslint .",
"lint:fix": "npm run lint -- --fix"
}
}
TypeScript
terminal
yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin typescript --dev
.eslintrc.js
module.exports = {
extends: ['algolia', 'algolia/typescript']
parserOptions: {
project: '<path-to-tsconfig.json>',
},
};
package.json
{
"scripts": {
"test": "npm run lint",
"lint": "eslint --ext .js,.ts,.tsx .",
"lint:fix": "npm run lint -- --fix"
}
}
You also need to make sure that all the files you want to lint are also included in tsconfig.json with the include property.
TypeScript with React
terminal
yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin typescript eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y --dev
.eslintrc.js
module.exports = {
extends: ['algolia', 'algolia/react', 'algolia/typescript']
};
Note: Be sure to put the algolia/typescript configuration last so the parser is properly set for TypeScript files.
package.json
{
"scripts": {
"test": "npm run lint",
"lint": "eslint --ext .js,.ts,.tsx .",
"lint:fix": "npm run lint -- --fix"
}
}
Vue
terminal
yarn add eslint-plugin-vue --dev
.eslintrc.js
module.exports = {
extends: ['algolia', 'algolia/vue']
};
package.json
{
"scripts": {
"test": "npm run lint",
"lint": "eslint --ext .js,.vue .",
"lint:fix": "npm run lint -- --fix"
}
}
VSCode
{
"eslint.validate": [
{
"language": "vue",
"autoFix": true
}
]
}
Node.js
package.json
{
"scripts": {
"test": "npm run lint",
"lint": "eslint .",
"lint:fix": "npm run lint -- --fix"
}
}
.eslintrc.js
module.exports = {
extends: 'algolia',
rules: {
'import/no-commonjs': 'off'
}
};
Existing codebase setup
If you have a lot of files already written and wants to now use
our linting tools, you might have a lot of errors. There's hope!
Just reformat all the files automatically and then manually fix remaining
errors.
terminal
npm run lint:fix
Setup autofix in IDE
Don't overlook this part, autofixing on save is a huge productivity boost.
Use any ESLint integration
and activate "Fix on save" option.
Also activate "Lint HTML files" when dealing with .vue components.
Ignoring files
See "Ignoring Files and Directories" on ESLint website.
Contributing
Test
We have a sample-project.
yarn test
Release
npm run release
