Skip to content

Commit

Permalink
migrate fork-ts-checker-webpack-plugin example to use ESLint (#960)
Browse files Browse the repository at this point in the history
* move fork-ts-checker-webpack-plugin

* make prettier correct

* add lint rule timings

* switch to released version of fork-ts-checker-webpack-plugin
  • Loading branch information
johnnyreilly committed Jul 13, 2019
1 parent d0f6203 commit 416fa24
Show file tree
Hide file tree
Showing 12 changed files with 893 additions and 313 deletions.
60 changes: 60 additions & 0 deletions examples/fork-ts-checker-webpack-plugin/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
// Useful references:
// https://www.npmjs.com/package/eslint-config-react-app
// https://github.com/facebook/create-react-app/blob/master/packages/eslint-config-react-app/index.js
// https://medium.com/@dors718/linting-your-react-typescript-project-with-eslint-and-prettier-2423170c3d42

const path = require('path');
module.exports = {
parser: '@typescript-eslint/parser', // Specifies the ESLint parser
plugins: [
'@typescript-eslint',
'react'
// 'prettier' commented as we don't want to run performance hog prettier through eslint as it's slow
],
env: {
browser: true,
jest: true
},
extends: [
'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
// 'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
'prettier/react', // disables react-specific linting rules that conflict with prettier
// 'plugin:prettier/recommended' // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
],
parserOptions: {
project: path.resolve(__dirname, './tsconfig.json'),
tsconfigRootDir: __dirname,
ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
sourceType: 'module', // Allows for the use of imports
ecmaFeatures: {
jsx: true // Allows for the parsing of JSX
}
},
rules: {
// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
// e.g. "@typescript-eslint/explicit-function-return-type": "off",
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/no-unused-vars': 'off',

// These rules don't add much value, are better covered by TypeScript and good definition files
'react/no-direct-mutation-state': 'off',
'react/no-deprecated': 'off',
'react/no-string-refs': 'off',
'react/require-render-return': 'off',

// we want to check ".tsx" files
'react/jsx-filename-extension': [
'warn',
{
extensions: ['.jsx', '.tsx']
}
],
'react/prop-types': 'off' // Is this incompatible with TS props type?
},
settings: {
react: {
version: 'detect' // Tells eslint-plugin-react to automatically detect the version of React to use
}
}
};
7 changes: 7 additions & 0 deletions examples/fork-ts-checker-webpack-plugin/.prettierrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
module.exports = {
semi: true,
trailingComma: 'all',
singleQuote: true,
printWidth: 120,
tabWidth: 4,
};
9 changes: 9 additions & 0 deletions examples/fork-ts-checker-webpack-plugin/.vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"eslint.autoFixOnSave": false,
"eslint.validate": [
"javascript",
"javascriptreact",
{ "language": "typescript", "autoFix": true },
{ "language": "typescriptreact", "autoFix": true }
]
}
35 changes: 21 additions & 14 deletions examples/fork-ts-checker-webpack-plugin/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,34 +6,41 @@
"scripts": {
"start": "webpack-dev-server --progress --color --mode development --config webpack.config.development.js",
"prebuild": "rimraf ./dist/*",
"build": "webpack --color --mode production --config webpack.config.production.js"
"build": "webpack --color --mode production --config webpack.config.production.js",
"lint": "eslint ./",
"lint-rule-timings": "cross-env TIMING=1 yarn lint"
},
"devDependencies": {
"@types/jest": "^23.0.0",
"@types/react": "^16.0.0",
"@types/react-dom": "^16.0.0",
"@types/react-router": "^4.0.12",
"@types/jest": "^24.0.0",
"@types/react": "^16.8.0",
"@types/react-dom": "^16.8.0",
"@types/react-router": "^5.0.0",
"@types/react-router-dom": "^4.0.5",
"@types/react-test-renderer": "^16.0.0",
"@types/react-test-renderer": "^16.8.0",
"@types/react-transition-group": "^2.0.2",
"@typescript-eslint/eslint-plugin": "^1.11.0",
"@typescript-eslint/parser": "^1.11.0",
"cross-env": "^5.2.0",
"eslint": "^6.0.1",
"eslint-config-prettier": "^6.0.0",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-react": "^7.14.2",
"fork-ts-checker-notifier-webpack-plugin": "^1.0.0",
"fork-ts-checker-webpack-plugin": "^1.0.0",
"fork-ts-checker-webpack-plugin": "^1.4.0",
"html-webpack-plugin": "next",
"prettier": "1.18.2",
"rimraf": "^2.6.1",
"source-map-loader": "^0.2.1",
"ts-loader": "^5.0.0",
"ts-loader": "^6.0.0",
"tslib": "^1.7.1",
"tslint": "^5.5.0",
"tslint-react": "^3.2.0",
"typescript": "^3.0.0",
"webpack": "^4.0.0",
"webpack-cli": "^3.0.0",
"webpack-dev-server": "^3.0.0"
},
"dependencies": {
"core-js": "^2.4.1",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"core-js": "^3.0.0",
"react": "^16.8.0",
"react-dom": "^16.8.0",
"whatwg-fetch": "^3.0.0"
}
}
2 changes: 1 addition & 1 deletion examples/fork-ts-checker-webpack-plugin/src/app.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import { Layout } from './components/layout';

export const App: React.SFC<{}> = _props => (
export const App: React.SFC = _props => (
<div className="ui container">
<Layout />
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import * as React from 'react';

export const Layout: React.SFC<{}> = _props => (
<h1>Heya, heya, heya!!</h1>
);
export const Layout: React.SFC = _props => <h1>Heya, heya, heya!!</h1>;
9 changes: 1 addition & 8 deletions examples/fork-ts-checker-webpack-plugin/src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,4 @@ import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { App } from './app';

const rootEl = document.getElementById('root');
const render = (Component: React.SFC) =>
ReactDOM.render(
<Component />,
rootEl
);

render(App);
ReactDOM.render(<App />, document.getElementById('root'));
59 changes: 25 additions & 34 deletions examples/fork-ts-checker-webpack-plugin/tsconfig.json
Original file line number Diff line number Diff line change
@@ -1,35 +1,26 @@
{
"include": [
"src/**/*.ts",
"src/**/*.tsx"
],
"compilerOptions": {
"allowSyntheticDefaultImports": false,
"target": "es5",
"downlevelIteration": true,
"importHelpers": true,
"sourceMap": true,
"module": "esnext",
"moduleResolution": "node",
"jsx": "react",
"allowJs": false,
"checkJs": false,
"lib": [
"dom",
"es2015",
"es2016",
"es2017",
"esnext"
],
"forceConsistentCasingInFileNames": true,
"experimentalDecorators": true,
"noImplicitAny": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noUnusedLocals": true,
"skipLibCheck": true,
"strictNullChecks": false,
"suppressImplicitAnyIndexErrors": true
}
}
"compilerOptions": {
"allowSyntheticDefaultImports": false,
"target": "es5",
"downlevelIteration": true,
"importHelpers": true,
"sourceMap": true,
"module": "esnext",
"moduleResolution": "node",
"jsx": "react",
"allowJs": false,
"checkJs": false,
"lib": ["dom", "es2015", "es2016", "es2017", "esnext"],
"forceConsistentCasingInFileNames": true,
"experimentalDecorators": true,
"noImplicitAny": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noUnusedLocals": true,
"skipLibCheck": true,
"strictNullChecks": false,
"suppressImplicitAnyIndexErrors": true,
"types": ["jest"]
}
}
127 changes: 0 additions & 127 deletions examples/fork-ts-checker-webpack-plugin/tslint.json

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable @typescript-eslint/no-var-requires */
const path = require('path');
const ForkTsCheckerNotifierWebpackPlugin = require('fork-ts-checker-notifier-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
Expand All @@ -21,7 +22,7 @@ module.exports = {
},
plugins: [
new ForkTsCheckerWebpackPlugin({
tslint: true, useTypescriptIncrementalApi: true
eslint: true
}),
new ForkTsCheckerNotifierWebpackPlugin({ title: 'TypeScript', excludeWarnings: false }),
new HtmlWebpackPlugin({
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable @typescript-eslint/no-var-requires */
const path = require('path');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
Expand Down

0 comments on commit 416fa24

Please sign in to comment.