eslint-config-clinia
This is Clinia'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...
Just focus on coding.
Table of Contents
Setup your project
Base requirements
yarn add \eslint babel-eslint prettier \eslint-config-clinia eslint-config-prettier \eslint-plugin-import eslint-plugin-prettier \eslint-plugin-eslint-comments \--dev
Vanilla
.eslintrc.js
moduleexports = extends: 'clinia';
package.json
Jest
We recommend using Jest as a test runner.
terminal
yarn add eslint-plugin-jest --dev
.eslintrc.js
moduleexports = extends: 'clinia/jest';
package.json
React
terminal
yarn add eslint-plugin-react eslint-plugin-react-hooks --dev
.eslintrc.js
moduleexports = extends: 'clinia/react';
package.json
Flow
terminal
yarn add eslint-plugin-flowtype --dev
.eslintrc.js
moduleexports = extends: 'clinia/flowtype';
Flow with React
terminal
yarn add eslint-plugin-flowtype eslint-plugin-react eslint-plugin-react-hooks --dev
.eslintrc.js
moduleexports = extends: 'clinia/flowtype' 'clinia/react';
package.json
TypeScript
terminal
yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin typescript --dev
.eslintrc.js
moduleexports = extends: 'clinia/typescript';
package.json
TypeScript with React
terminal
yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin typescript eslint-plugin-react eslint-plugin-react-hooks --dev
.eslintrc.js
moduleexports = extends: 'clinia/react' 'clinia/typescript';
Note: Be sure to put the clinia/typescript
configuration last so the parser is properly set for TypeScript files.
package.json
Vue
terminal
yarn add eslint-plugin-vue --dev
.eslintrc.js
moduleexports = extends: 'clinia/vue';
package.json
VSCode
Node.js
package.json
.eslintrc.js
moduleexports = extends: 'clinia' rules: 'import/no-commonjs': 'off' ; ## Existing codebase setup If you have a lot of files already written and wants to now useour linting tools you might have a lot of errors There's hope! Just reformat all the files automatically and then manually fix remainingerrors. **terminal**```shnpm 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