ShareGate shared ESLint config.
Install the ShareGate recommended ESLint configuration packages.
For a native JavaScript project:
npm i -D eslint @sharegate/eslint-config-recommendedWith TypeScript:
npm i -D eslint @sharegate/eslint-config-typescript @sharegate/eslint-config-recommendedYou can also optionally install the following configuration packages:
- @sharegate/eslint-config-sort-imports
- @sharegate/eslint-config-lodash
- @sharegate/eslint-config-strict
Then, create a file called .eslintrc.js at the root of your project and add the following configurations:
module.exports = {
root: true,
extends: [
"@sharegate/eslint-config-recommended",
"@sharegate/eslint-config-typescript", /* (If your project is IN TypeScript) */
...
]
};Follow the instructions for the Non React App configuration.
Then, install the React specific configuration packages:
npm i -D @sharegate/eslint-config-reactIf your project is NOT using TypeScript:
npm i -D @babel/eslint-parserFinally, update your existing .eslintrc.js configuration file:
module.exports = {
...
parser: "@babel/eslint-parser" /* (If your project is NOT in TypeScript) */
extends: [
"@sharegate/eslint-config-recommended",
"@sharegate/eslint-config-typescript", /* (If your project is IN TypeScript) */
"@sharegate/eslint-config-react"
...
],
...
};Follow the instructions for the Non React App configuration.
Then, install the Nextjs specific configuration packages:
npm i -D @babel/eslint-parser @sharegate/eslint-config-nextjsIf your project is NOT using TypeScript:
npm i -D @babel/eslint-parserFinally, update your existing .eslintrc.js configuration file:
module.exports = {
...
parser: "@babel/eslint-parser" /* (If your project is NOT in TypeScript) */
extends: [
"@sharegate/eslint-config-recommended",
"@sharegate/eslint-config-typescript", /* (If your project is IN TypeScript) */
"@sharegate/eslint-config-nextjs"
...
],
...
};Install the ESLint extension for VSCode. The extension will provide Just In Time linting while typing in VSCode.
To enable ESLint autofix on save, add the following configuration to your VSCode project settings:
{
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.organizeImports": false
},
"editor.formatOnSave": true,
"[html]": {
"editor.formatOnSave": false
},
"javascript.format.enable": false,
"javascript.validate.enable": true,
"json.format.enable": false,
"eslint.alwaysShowStatus": true,
"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"]
}This is also strongly recommended that you had a .prettierignore file at the root of your project with * as content to prevent any conflict between ESLint and Prettier for user who have the Prettier VSCode extension installed:
// .prettierignore
*.js
*.jsx
// or if you want to ignore all files
*The following core configurations are provided:
- recommended: Use this for anything written with the latest ECMAScript specifications.
- typescript: Use this for anything written in TypeScript.
- react: Use this for React projects.
- nextjs: Use this for Nextjs projects.
The typescript config extends the recommended config, you shouldn't have to include both.
We also provides the following optionnal configurations, which can be used on top of the core configurations:
- sort-imports: Use this to sort your imports with ESLint.
- lodash: Use this for projects that use lodash.
- strict: Use this for projects that wants to prohibits some syntax.
Sharegate's plugin provides the following custom rules, which are included as appropriate in all core linting configs:
- prefer-cx: Prefer cx over classnames as the name of classnames imports.
- restrict-full-import: Prevent importing the entirety of a package.
- semantic-ui-button-has-type: Prevent usage of Semantic UI's
Buttonelements without an explicittypeattribute. - strict-css-modules-names: CSS modules should have the same file name (minus the file extension) as the scoped component and be located in the same folder.
- prefer-orbit-ui-components: Prefer Orbit UI React components over Semantic UI React components.
The following documentation is only for the maintainers of this repository.
Clone the repository:
git clone https://github.com/gsoft-inc/sg-eslint.gitThen, install the dependencies for all the packages with Yarn:
yarn installWhy you must use Yarn?
Because this project is a monorepo and we leverage yarn workspace to manage our packages dependencies and inter-dependencies.
This project use Lerna to facilitate the release of the packages.
The packages can be released independently. The decision to release or not a package is automatically based on wether the code of the package has changed or not.
Process
Updates to these configuration packages should batch multiple changes. Most of ESLint rules are stylistics and doesn't have an impact on the success of a project. On the other hand, frequent changes of those rules might cause friction and be a burden for the teams.
Adding a new rule or updating an existing one can generate a lot of modifications to the code of an existing project. To ensure that the consumers understand the impact of updating these packages, every release should be a major increment to the version number.
Every release should also contain a release notes that includes the new or updated rules and how to disabled / revert them manually in the consumer project when possible.
Do the actual release
Before you release, make sure you have write access for all the NPM packages that will be published and that you are logged in to NPM.
To release, open a terminal at the root of the project and execute the following commands:
yarn new-version
yarn release
yarn push-release <yyyy-MM-dd>After you released the packages, create a Github release for the Git annotated tag [yyyy-MM-dd] created earlier by the push-release command and list all the changes that has been published.
Dont forget to publish the release.
Copyright © 2019, GSoft inc. This code is licensed under the Apache License, Version 2.0. You may obtain a copy of this license at https://github.com/gsoft-inc/gsoft-license/blob/master/LICENSE.