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
yarn add \
eslint babel-eslint prettier \
eslint-config-algolia eslint-config-prettier \
eslint-plugin-import eslint-plugin-prettier \
--dev
.eslintrc.js
module.exports = {
extends: 'algolia'
};
package.json
{
"scripts": {
"test": "npm run lint",
"lint": "eslint .",
"lint:fix": "npm run lint -- --fix"
}
}
We recommend using Jest as a test runner.
terminal
yarn add eslint-plugin-jest --dev
.eslintrc.js
module.exports = {
extends: 'algolia/jest'
};
package.json
{
"scripts": {
"test": "npm run lint",
"lint": "eslint .",
"lint:fix": "npm run lint -- --fix"
}
}
terminal
yarn add eslint-plugin-react --dev
.eslintrc.js
module.exports = {
extends: 'algolia/react'
};
package.json
{
"scripts": {
"test": "npm run lint",
"lint": "eslint .",
"lint:fix": "npm run lint -- --fix"
}
}
terminal
yarn add eslint-plugin-flowtype --dev
.eslintrc.js
module.exports = {
extends: 'algolia/flowtype'
};
terminal
yarn add eslint-plugin-flowtype eslint-plugin-react --dev
.eslintrc.js
module.exports = {
extends: ['algolia/flowtype', 'algolia/react']
};
package.json
{
"scripts": {
"test": "npm run lint",
"lint": "eslint .",
"lint:fix": "npm run lint -- --fix"
}
}
terminal
yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin typescript --dev
.eslintrc.js
module.exports = {
extends: 'algolia/typescript'
};
package.json
{
"scripts": {
"test": "npm run lint",
"lint": "eslint --ext .js,.ts,.tsx .",
"lint:fix": "npm run lint -- --fix"
}
}
terminal
yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin typescript eslint-plugin-react --dev
.eslintrc.js
module.exports = {
extends: ['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"
}
}
terminal
yarn add eslint-plugin-vue --dev
.eslintrc.js
module.exports = {
extends: '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
}
]
}
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'
}
};
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
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.
See "Ignoring Files and Directories" on ESLint website.
We have a sample-project.
yarn test
npm run release