Use ESLint everywhere (microsoft#13944)

* Delete tslint.json

* Remove tslint-rules dep, add eslint-rules dep

* Update config files

* Delete tslint-rules package

* Add no-tslint-comments

* Go back to naming convention helper function since override wasn't working

* fix lint-staged eslint

* Ignore unused disables in lint-staged

* All the fixes and renames

* Scripts to prevent tslint reintroduction

Co-authored-by: KHMakoto <[email protected]>

.github/CODEOWNERS

@@ -65,7 +65,6 @@ packages/react-hooks/ @ecraig12345
 packages/styling/ @dzearing
 packages/styling/src/interfaces/ @phkuo
 packages/styling/src/styles/ @phkuo
-packages/tslint-rules/ @ecraig12345
 packages/tsx-editor/ @ecraig12345
 # packages/utilities/
 packages/utilities/positioning/ @joschect

.prettierignore

@@ -9,9 +9,6 @@ monaco-typescript.d.ts
 *.scss.ts
 _*.scss
 
-# messes up formatting
-packages/tslint-rules/tslint.json
-
 # folders of generated files
 lib
 lib-amd

.vscode/extensions.json

@@ -3,8 +3,7 @@
   // for the documentation about the extensions.json format
   "recommendations": [
     // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
-    "eg2.tslint", // remove after moving to ESLint
-    // "dbaeumer.vscode-eslint", // uncomment after moving to ESLint
+    "dbaeumer.vscode-eslint",
     "asvetliakov.snapshot-tools",
     "esbenp.prettier-vscode"
   ]

.vscode/settings.json

@@ -40,20 +40,14 @@
     "**/*.scss.ts": true
   },
   "editor.rulers": [120],
-  "tslint.enable": true,
-  "tslint.rulesDirectory": "./node_modules/tslint-microsoft-contrib",
-  // "eslint.enable": true,
-  // "eslint.workingDirectories": [{ "mode": "auto" }], // infer working directory based on .eslintrc/package.json location
+  "eslint.enable": true,
+  "eslint.workingDirectories": [{ "mode": "auto" }], // infer working directory based on .eslintrc/package.json location
   "typescript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": false,
   "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false,
   "typescript.preferences.quoteStyle": "single",
   "typescript.tsdk": "./node_modules/typescript/lib",
-  "tslint.autoFixOnSave": false,
-  "tslint.exclude": "**/*.scss.ts",
   "files.associations": {
-    "**/*.json.hbs": "jsonc",
-    "**/tslint.json": "jsonc",
-    "**/tslint.*.json": "jsonc"
+    "**/*.json.hbs": "jsonc"
   },
   "[json]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"

apps/a11y-tests/just.config.ts

@@ -1,7 +1,9 @@
-// a11y-tests disabled until occasional local and CI timeout issue can be resolved.
-// const { preset, just } = require('@uifabric/build');
-// const { task, series, condition, argv } = just;
+const { preset, just } = require('@uifabric/build');
+const { task } = just;
+
+preset();
 
-// preset();
+task('build', 'build:node-lib').cached();
 
-// task('build', series('clean', 'ts:commonjs-only')).cached();
+// a11y-tests disabled until occasional local and CI timeout issue can be resolved.
+task('test', 'no-op');

apps/a11y-tests/package.json

@@ -27,6 +27,7 @@
     "react-dom": "16.8.6"
   },
   "devDependencies": {
+    "@fluentui/eslint-plugin": "^0.51.0",
     "@types/glob": "^7.1.1",
     "@types/jest": "~24.9.0",
     "@types/node": "^10.3.2",
@@ -35,7 +36,6 @@
     "@types/react-dom": "16.8.4",
     "@types/sarif": "^2.1.1",
     "@uifabric/build": "^7.0.0",
-    "@uifabric/icons": "^7.3.60",
-    "@uifabric/tslint-rules": "^7.2.2"
+    "@uifabric/icons": "^7.3.60"
   }
 }

apps/a11y-tests/src/getSarifReport.ts

@@ -13,7 +13,7 @@ const disabledAxeRules = [
   'bypass',
 ];
 
-/* tslint:disable-next-line:no-any */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function renderTestHtml(element: React.ReactElement<any>): string {
   resetIds();
   const stylesheet = Stylesheet.getInstance();
@@ -30,7 +30,7 @@ function renderTestHtml(element: React.ReactElement<any>): string {
   `;
 }
 
-/* tslint:disable-next-line:no-any */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export async function getSarifReport(browser: puppeteer.Browser, element: React.ReactElement<any>): Promise<SarifLog> {
   const page = await browser.newPage();
   const testHtml = renderTestHtml(element);

apps/a11y-tests/src/tests/ComponentExamples.test.tsx

@@ -6,6 +6,7 @@ import * as puppeteer from 'puppeteer';
 import * as os from 'os';
 import { getSarifReport } from '../getSarifReport';
 import { SarifLog } from 'axe-sarif-converter';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { Result } from 'sarif';
 
 const ReactDOM = require('react-dom');
@@ -17,7 +18,7 @@ function dehydrateSarifReport(report: SarifLog): Result[] {
 
 async function testComponent(
   browserPromise: Promise<puppeteer.Browser>,
-  /* tslint:disable-next-line:no-any */
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   component: { name: string; pageName: string; elem: React.ReactElement<any> },
 ) {
   it(`checks accessibility of ${component.name} (${component.pageName})`, async () => {

apps/codesandbox-react-template/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "extends": ["plugin:@fluentui/eslint-plugin/react"],
+  "root": true
+}

apps/codesandbox-react-template/just.config.ts

@@ -0,0 +1,3 @@
+const { preset } = require('@uifabric/build');
+
+preset();

apps/codesandbox-react-template/package.json

@@ -4,20 +4,16 @@
   "version": "7.0.0",
   "private": true,
   "scripts": {
-    "build": "just-scripts build",
-    "bundle": "just-scripts bundle",
+    "build": "tsc --noEmit",
     "lint": "just-scripts lint",
-    "test": "just-scripts test",
     "just": "just-scripts",
     "clean": "just-scripts clean",
-    "code-style": "just-scripts code-style",
-    "start": "just-scripts dev"
+    "code-style": "just-scripts code-style"
   },
   "devDependencies": {
+    "@fluentui/eslint-plugin": "^0.51.0",
     "@types/react": "16.8.25",
     "@types/react-dom": "16.8.4",
-    "@types/webpack-env": "1.15.1",
-    "@uifabric/tslint-rules": "^7.2.2",
     "@uifabric/build": "^7.0.0",
     "typescript": "3.7.2"
   },
@@ -26,7 +22,6 @@
     "@microsoft/load-themed-styles": "^1.10.26",
     "@fluentui/react": "^7.121.12",
     "react": "16.8.6",
-    "react-app-polyfill": "~1.0.1",
     "react-dom": "16.8.6",
     "tslib": "^1.10.0"
   }

apps/codesandbox-react-template/src/index.tsx

@@ -13,13 +13,13 @@ import {
 } from '@fluentui/react';
 
 let _rootDiv: HTMLElement;
-let choicegroupOptions = [
+const choicegroupOptions = [
   { key: 'A', text: 'Option A' },
   { key: 'B', text: 'Option B' },
   { key: 'C', text: 'Option C', disabled: true },
   { key: 'D', text: 'Option D' },
 ];
-let dropdownOptions = [
+const dropdownOptions = [
   { key: 'fruitsHeader', text: 'Fruits', itemType: DropdownMenuItemType.Header },
   { key: 'apple', text: 'Apple' },
   { key: 'banana', text: 'Banana' },
@@ -31,7 +31,7 @@ let dropdownOptions = [
   { key: 'carrot', text: 'Carrot' },
   { key: 'lettuce', text: 'Lettuce' },
 ];
-let dropdownStyles = {
+const dropdownStyles = {
   dropdown: { width: 300 },
 };
 
@@ -45,18 +45,10 @@ function start(): void {
     <Fabric>
       <Stack gap={8}>
         <Checkbox label="Unchecked checkbox (uncontrolled)" />
-        <ChoiceGroup defaultSelectedKey="B" options={choicegroupOptions} label="Pick One" required={true} />
-        <Slider
-          label="Snapping slider example"
-          min={0}
-          max={50}
-          step={10}
-          defaultValue={20}
-          showValue={true}
-          snapToStep={true}
-        />
+        <ChoiceGroup defaultSelectedKey="B" options={choicegroupOptions} label="Pick One" required />
+        <Slider label="Snapping slider example" min={0} max={50} step={10} defaultValue={20} showValue snapToStep />
         <TextField label="Standard" />
-        <Toggle label="Enabled and checked" defaultChecked={true} onText="On" offText="Off" />
+        <Toggle label="Enabled and checked" defaultChecked onText="On" offText="Off" />
         <Dropdown
           placeholder="Select an option"
           label="Basic uncontrolled example"

apps/codesandbox-react-template/tsconfig.json

@@ -13,13 +13,7 @@
     "preserveConstEnums": true,
     "strict": true,
     "skipLibCheck": true,
-    "lib": ["es5", "dom"],
-    "typeRoots": ["../../node_modules/@types", "../../typings"],
-    "types": ["webpack-env", "custom-global"],
-    "paths": {
-      "codesandbox-react-template/lib/*": ["./src/*"],
-      "codesandbox-react-template": ["./src"]
-    }
+    "lib": ["es5", "dom"]
   },
   "include": ["src"]
 }

apps/dom-tests/package.json

@@ -12,6 +12,7 @@
     "start": "just-scripts dev"
   },
   "dependencies": {
+    "@fluentui/eslint-plugin": "^0.51.0",
     "@microsoft/load-themed-styles": "^1.10.26",
     "@types/jest": "~24.9.0",
     "@types/puppeteer": "1.12.3",
@@ -20,7 +21,6 @@
     "@types/webpack-env": "1.15.1",
     "@uifabric/build": "^7.0.0",
     "@uifabric/example-app-base": "^7.12.91",
-    "@uifabric/tslint-rules": "^7.2.2",
     "expect-puppeteer": "4.1.0",
     "jest-environment-node": "~24.9.0",
     "jest-environment-puppeteer": "^4.1.0",

apps/fabric-website-resources/package.json

@@ -26,11 +26,11 @@
     "update-snapshots": "just-scripts jest -u"
   },
   "devDependencies": {
+    "@fluentui/eslint-plugin": "^0.51.0",
     "@types/react": "16.8.25",
     "@types/react-dom": "16.8.4",
     "@types/webpack-env": "1.15.1",
     "@uifabric/build": "^7.0.0",
-    "@uifabric/tslint-rules": "^7.2.2",
     "react": "16.8.6",
     "react-app-polyfill": "~1.0.1",
     "react-dom": "16.8.6"

apps/fabric-website-resources/src/components/pages/ColorsPage.tsx

@@ -165,6 +165,7 @@ export class ColorsPage extends React.Component<{}, IColorsPageState> {
           >
             <ColorPicker
               color={colorPickerSlotRule.color!.str}
+              // eslint-disable-next-line react/jsx-no-bind
               onChange={this._semanticSlotRuleChanged.bind(this, colorPickerSlotRule)}
             />
           </Callout>
@@ -334,6 +335,7 @@ export class ColorsPage extends React.Component<{}, IColorsPageState> {
         key={slotRule.name}
         className="ms-themer-swatch"
         style={{ backgroundColor: slotRule.color!.str }}
+        // eslint-disable-next-line react/jsx-no-bind
         onClick={this._onSwatchClick.bind(this, slotRule)}
       />
     );
@@ -427,7 +429,7 @@ export class ColorsPage extends React.Component<{}, IColorsPageState> {
               <textarea
                 readOnly={true}
                 spellCheck={false}
-                value={JSON.stringify(ThemeGenerator.getThemeAsJson(abridgedTheme), void 0, 2)}
+                value={JSON.stringify(ThemeGenerator.getThemeAsJson(abridgedTheme), undefined, 2)}
                 style={{ width: 350 }}
               />
             </PivotItem>
@@ -447,6 +449,7 @@ export class ColorsPage extends React.Component<{}, IColorsPageState> {
 
   private _makeNewTheme = (): void => {
     const themeAsJson: { [key: string]: string } = ThemeGenerator.getThemeAsJson(this.state.themeRules);
+    // eslint-disable-next-line no-console
     console.log('New theme...', themeAsJson);
 
     const finalTheme = loadTheme({
@@ -462,6 +465,7 @@ export class ColorsPage extends React.Component<{}, IColorsPageState> {
 
     document.body.style.backgroundColor = finalTheme.semanticColors.bodyBackground;
     document.body.style.color = finalTheme.semanticColors.bodyText;
+    // eslint-disable-next-line no-console
     console.log('New theme:', finalTheme);
   };
 
@@ -493,6 +497,7 @@ export class ColorsPage extends React.Component<{}, IColorsPageState> {
           <ColorPicker
             key={'baseslotcolorpicker' + baseSlot}
             color={this.state.themeRules[BaseSlots[baseSlot]].color!.str}
+            // eslint-disable-next-line react/jsx-no-bind
             onChange={onChange}
           />
         </div>

apps/fabric-website-resources/src/components/pages/ThemePage.tsx

@@ -84,6 +84,7 @@ export class ThemePage extends React.Component<IThemePageProps, IThemePageState>
                 <div
                   className={classNames.colorSwatch}
                   data-is-focusable="true"
+                  // eslint-disable-next-line react/jsx-no-bind
                   onClick={this._onSwatchClicked.bind(this, item, index, list)}
                 >
                   <span className={classNames.swatch} style={{ backgroundColor: item.value }} />
@@ -109,6 +110,7 @@ export class ThemePage extends React.Component<IThemePageProps, IThemePageState>
           >
             <ColorPicker
               color={colorPickerProps.value}
+              // eslint-disable-next-line react/jsx-no-bind
               onChange={this._onColorChanged.bind(this, colorPickerProps.index)}
             />
           </Callout>

apps/fabric-website/package.json

@@ -27,14 +27,13 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "@fluentui/eslint-plugin": "^0.51.0",
     "@types/node": "^10.3.2",
     "@types/react": "16.8.25",
     "@types/react-dom": "16.8.4",
     "@types/webpack-env": "1.15.1",
     "@uifabric/build": "^7.0.0",
-    "@uifabric/tslint-rules": "^7.2.2",
     "@uifabric/tsx-editor": "^0.11.107",
-    "office-ui-fabric-core": "^11.0.0",
     "react": "16.8.6",
     "react-app-polyfill": "~1.0.1",
     "react-dom": "16.8.6",
@@ -53,8 +52,13 @@
     "@uifabric/set-version": "^7.0.15",
     "@uifabric/theme-samples": "^7.0.103",
     "json-loader": "^0.5.7",
+    "office-ui-fabric-core": "^11.0.0",
     "office-ui-fabric-react": "^7.121.12",
     "tslib": "^1.10.0",
     "whatwg-fetch": "2.0.4"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0 <17.0.0",
+    "react-dom": ">=16.8.0 <17.0.0"
   }
 }

apps/fabric-website/src/components/Nav/Nav.tsx

@@ -128,7 +128,7 @@ export class Nav extends React.Component<INavProps, INavState> {
     let linkText = <>{text}</>;
 
     // Highlight search query within link.
-    if (!!searchQuery) {
+    if (searchQuery) {
       const matchIndex = text.toLowerCase().indexOf(searchQuery.toLowerCase());
       if (matchIndex >= 0) {
         const before = text.slice(0, matchIndex);

apps/fabric-website/src/components/Site/Site.tsx

@@ -118,7 +118,6 @@ export class Site<TPlatforms extends string = string> extends React.Component<
     window.removeEventListener('hashchange', this._handleRouteChange);
   }
 
-  // tslint:disable-next-line function-name
   public UNSAFE_componentWillReceiveProps(nextProps: ISiteProps): void {
     if (nextProps && nextProps.children !== this.props.children) {
       document.body.scrollTop = document.documentElement.scrollTop = 0;