6.0.0 Proper Prettier & ESLint

Author: kirill-konshin

eslint-config-ringcentral-typescript/README.md

@@ -3,19 +3,23 @@ RingCentral TypeScript
 
 A stricter and TypeScript-enabled version of https://github.com/ringcentral/ringcentral-javascript.
 
+Starting with version `6.x` we obey the [recommended prettier approach](https://prettier.io/docs/en/integrating-with-linters.html): disable ESLint's style-related rules + separate prettier executable (previously prettier tasks were also executed by ESLint).
+
 ## Installation
 
 ```bash
-$ npm install eslint eslint-config-ringcentral-typescript --save-dev
+$ yarn add eslint prettier eslint-config-ringcentral-typescript -D
 ```
 
 Add this to `scripts` section of `package.json`:
 
 ```json
 {
   "scripts": {
-      "lint": "eslint --cache --cache-location node_modules/.cache/eslint --fix ",
-      "lint:all": "npm run lint 'src/**/*.ts' 'src/**/*.tsx'"
+    "prettier": "prettier --write",
+    "eslint": "eslint --cache --cache-location node_modules/.cache/eslint --fix",
+    "lint:all": "yarn prettier --write . && yarn eslint --fix .",
+    "lint:staged": "lint-staged --debug"
   }
 }
 ```
@@ -25,6 +29,17 @@ You can add `DEBUG=eslint:cli-engine` to output files that were linted.
 
 :warning: Please note commas around globs: `'src/**/*.ts'`, this will prevent your OS to expand those globs.
 
+Add `.eslintignore` and `.prettierignore` files, both usually look like this:
+
+```gitignore
+.husky
+.pnp.js
+.yarn
+coverage
+node_modules
+storybook-static
+dist
+```
 Create `.eslintrc`:
 
 ```json
@@ -35,27 +50,13 @@ Create `.eslintrc`:
 }
 ```
 
-Create `.prettierrc` (optional):
-
-```bash
-{
-  "printWidth": 120
-}
-```
-
-:warning: Keep in mind that anything you set in `.prettierrc` may be overridden by config specified in this repo.
-
-You may use following trick in `.eslintrc` if you need to take control:
+Create `.prettierrc.js` (optional):
 
 ```js
-const prettierOptions = JSON.parse(require('fs').readFileSync('./.prettierrc').toString());
-
 module.exports = {
-  ...
-  rules: {
-    'prettier/prettier': ['warn', Object.assign({}, prettierOptions)]
-  }
-};
+    ...require('eslint-config-ringcentral-typescript/src/prettier'),
+    // overrides if needed
+}
 ```
 
 Create a `.editorconfig` (optional):
@@ -73,7 +74,7 @@ insert_final_newline = false
 [*.{js,jsx,ts,tsx}]
 indent_size = 4
 
-[*.{css,sass,scss,yml,json}]
+[*.{css,sass,scss,less,yml,json,md}]
 indent_size = 2
 
 [Makefile]
@@ -85,37 +86,35 @@ indent_style = tab
 Works best when used together with [Husky](https://github.com/typicode/husky) and [Lint Staged](https://github.com/okonet/lint-staged):
 
 ```bash
-$ npm install husky lint-staged --save-dev
+$ yarn add husky lint-staged -D
 ```
 
 Add this to `scripts` section of `package.json`:
 
-```json
+```json5
 {
   "scripts": {
+      "prepare": "husky install",     // yarn 1 and npm
+      "postinstall": "husky install", // yarn 2 private packages 
       "lint:staged": "lint-staged"
   }
 }
 ```
 
-Create `.huskyrc`: 
+See Husky documentation for detailed instructions for [Yarn 2 and public package](https://typicode.github.io/husky/#/?id=yarn-2).
 
-```json
-{
-  "hooks": {
-    "pre-commit": "npm run lint:staged"
-  }
-}
+Create `.husky/pre-commit`: 
+
+```bash
+yarn lint:staged
 ```
 
 Create `.lintstagedrc`:
 
 ```json
 {
-  "*.{js,jsx,ts,tsx}": [
-    "npm run lint --",
-    "git add"
-  ]
+  "*.{js,jsx,ts,tsx,css,scss,sass,less,md,yml,json}": ["yarn prettier", "git add"],
+  "*.{js,jsx,ts,tsx}": ["yarn eslint", "git add"]
 }
 ```
 

eslint-config-ringcentral-typescript/package.json

@@ -17,16 +17,16 @@
     "eslint-config-ringcentral": "1.0.0",
     "eslint-import-resolver-node": "0.3.4",
     "eslint-plugin-flowtype": "5.2.0",
-    "eslint-plugin-import": "2.22.1",
+    "eslint-plugin-import": "2.24.2",
     "eslint-plugin-jest": "24.1.3",
     "eslint-plugin-jsx-a11y": "6.4.1",
     "eslint-plugin-prettier": "3.3.1",
-    "eslint-plugin-react": "7.22.0",
+    "eslint-plugin-react": "7.25.1",
     "eslint-plugin-react-hooks": "4.2.0",
     "eslint-plugin-testing-library": "3.10.1",
     "eslint-plugin-ringcentral": "1.0.0",
     "eslint-plugin-sonarjs": "0.5.0",
-    "prettier": "2.2.1"
+    "prettier": "2.4.0"
   },
   "peerDependencies": {
     "eslint": "*",

eslint-config-ringcentral-typescript/src/config.js

@@ -2,32 +2,18 @@ require('@rushstack/eslint-patch/modern-module-resolution');
 
 module.exports = {
     root: true,
-    plugins: ['prettier'], //FIXME [UIA-10000] Remove
     extends: [
         require.resolve('eslint/conf/eslint-recommended'),
         'plugin:import/recommended',
         'plugin:jsx-a11y/recommended',
         'plugin:react/recommended',
         require.resolve('eslint-config-react-app'),
         require.resolve('eslint-config-ringcentral'),
-        // 'plugin:prettier/recommended', // must be below ringcentral to override react prefs
-        require.resolve('eslint-config-prettier'), // must be below ringcentral to override react prefs
-        require.resolve('eslint-config-prettier/react'), // must be below ringcentral to override react prefs
         'plugin:@typescript-eslint/recommended', // must be below react-app & ringcentral to enable proper parser
-        'plugin:import/typescript',
+        require.resolve('eslint-config-prettier'), // must be below ringcentral to override react prefs
     ],
     rules: {
         curly: 'error',
-        'prettier/prettier': [
-            'error',
-            {
-                bracketSpacing: false,
-                parser: 'typescript',
-                singleQuote: true,
-                tabWidth: 4,
-                trailingComma: 'all',
-            },
-        ],
         'no-shadow': 'off',
         '@typescript-eslint/ban-types': 'off',
         '@typescript-eslint/indent': 'off', // prettier takes care of it

eslint-config-ringcentral-typescript/src/prettier.js

@@ -0,0 +1,14 @@
+module.exports = {
+    bracketSpacing: false,
+    singleQuote: true,
+    tabWidth: 2,
+    trailingComma: 'all',
+    overrides: [
+        {
+            files: '*.{js,jsx,ts,tsx,html}',
+            options: {
+                tabWidth: 4
+            }
+        }
+    ]
+};

eslint-config-ringcentral/package.json

@@ -28,10 +28,10 @@
   "homepage": "https://github.com/ringcentral/ringcentral-javascript",
   "devDependencies": {
     "eslint": "^7.11.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-react": "^7.21.4",
+    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-react": "^7.25.1",
     "eslint-plugin-ringcentral": "^1.0.0",
-    "eslint-plugin-sonarjs": "^0.5.0"
+    "eslint-plugin-sonarjs": "0.5.0"
   },
   "peerDependencies": {
     "eslint": "^7.11.0",

lerna.json

@@ -2,5 +2,5 @@
   "lerna": "3.19.0",
   "useWorkspaces": true,
   "npmClient": "yarn",
-  "version": "0.0.0"
+  "version": "1.0.0"
 }

package.json

@@ -8,7 +8,7 @@
     "publish:release": "lerna publish --tag-version-prefix=\"\" --force-publish=* --no-push --no-git-tag-version"
   },
   "dependencies": {
-    "lerna": "3.19.0"
+    "lerna": "4.0.0"
   },
   "repository": {
     "type": "git",