diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index 746884a03eb..6da4cbd2611 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -303,28 +303,45 @@ module.exports = function(webpackEnv) { // First, run the linter. // It's important to do this before Babel processes the JS. - { - test: /\.(js|mjs|jsx)$/, - enforce: 'pre', - use: [ - { - options: { - formatter: require.resolve('react-dev-utils/eslintFormatter'), - eslintPath: require.resolve('eslint'), - // @remove-on-eject-begin - baseConfig: { - extends: [require.resolve('eslint-config-react-app')], - settings: { react: { version: '999.999.999' } }, - }, - ignore: false, - useEslintrc: false, - // @remove-on-eject-end + ...(!useTypeScript + ? [ + { + test: /\.(js|mjs|jsx)$/, + enforce: 'pre', + use: [ + { + options: { + formatter: require.resolve( + 'react-dev-utils/eslintFormatter' + ), + eslintPath: require.resolve('eslint'), + // @remove-on-eject-begin + baseConfig: { + extends: [require.resolve('eslint-config-react-app')], + settings: { react: { version: '999.999.999' } }, + }, + ignore: false, + useEslintrc: false, + // @remove-on-eject-end + }, + loader: require.resolve('eslint-loader'), + }, + ], + include: paths.appSrc, }, - loader: require.resolve('eslint-loader'), - }, - ], - include: paths.appSrc, - }, + ] + : [ + { + test: /\.(ts|tsx)$/, + enforce: 'pre', + use: [ + { + loader: require.resolve('tslint-loader'), + }, + ], + include: paths.appSrc, + }, + ]), { // "oneOf" will traverse all following loaders until one will // match the requirements. When no loader matches it will fall diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 1f6b8cfafec..b6169f27a59 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -66,6 +66,10 @@ "sass-loader": "7.1.0", "style-loader": "0.23.0", "terser-webpack-plugin": "1.1.0", + "tslint": "^5.11.0", + "tslint-config-prettier": "^1.17.0", + "tslint-loader": "^3.5.4", + "tslint-react": "^3.6.0", "url-loader": "1.1.1", "webpack": "4.19.1", "webpack-dev-server": "3.1.9", diff --git a/packages/react-scripts/template-typescript/src/App.tsx b/packages/react-scripts/template-typescript/src/App.tsx index ff5a4a660ee..791cbd039d9 100644 --- a/packages/react-scripts/template-typescript/src/App.tsx +++ b/packages/react-scripts/template-typescript/src/App.tsx @@ -3,7 +3,7 @@ import logo from './logo.svg'; import './App.css'; class App extends Component { - render() { + public render() { return (
diff --git a/packages/react-scripts/template-typescript/tslint.json b/packages/react-scripts/template-typescript/tslint.json new file mode 100644 index 00000000000..b85a49359f0 --- /dev/null +++ b/packages/react-scripts/template-typescript/tslint.json @@ -0,0 +1,14 @@ +{ + "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"], + "linterOptions": { + "exclude": [ + "config/**/*.js", + "node_modules/**/*.ts", + "coverage/lcov-report/*.js", + "src/serviceWorker.ts" + ] + }, + "rules": { + "ordered-imports": false + } +}