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
  • Vanilla
  • Jest
  • React
  • Flow
  • Flow with React
  • TypeScript
  • TypeScript with React
  • Vue
  • Node.js
• Setup autofix in IDE
• Ignoring files
• Contributing
  • Test
  • Release

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

module.exports = {
  extends: 'clinia'
};

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: 'clinia/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 --dev

.eslintrc.js

module.exports = {
  extends: 'clinia/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: 'clinia/flowtype'
};

Flow with React

terminal

yarn add eslint-plugin-flowtype eslint-plugin-react eslint-plugin-react-hooks --dev

.eslintrc.js

module.exports = {
  extends: ['clinia/flowtype', 'clinia/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: 'clinia/typescript'
};

package.json

{
  "scripts": {
    "test": "npm run lint",
    "lint": "eslint --ext .js,.ts,.tsx .",
    "lint:fix": "npm run lint -- --fix"
  }
}

TypeScript with React

terminal

yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin typescript eslint-plugin-react eslint-plugin-react-hooks --dev

.eslintrc.js

module.exports = {
  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

{
  "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: 'clinia/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: 'clinia',
  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**
```sh
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