Skip to content

Commit b343104

Browse files
committed
[TypeScript] Support TSLint
1 parent 1bbd9e2 commit b343104

File tree

10 files changed

+55
-31
lines changed

10 files changed

+55
-31
lines changed

packages/babel-preset-react-app/README.md

+2
Original file line numberDiff line numberDiff line change
@@ -52,3 +52,5 @@ To use this package with [`@babel/preset-typescript`]https://www.npmjs.com/packa
5252
"presets": [["react-app", { "typescript": true }]]
5353
}
5454
```
55+
56+
TSLint is also automatically supported, you only need to create a `tslint.json` (and optionally a `tslint.prod.json`) file at the root directory.

packages/react-dev-utils/WebpackDevServerUtils.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,7 @@ function createCompiler(webpack, config, appName, urls, useYarn) {
177177
console.log(chalk.yellow('Compiled with warnings.\n'));
178178
console.log(messages.warnings.join('\n\n'));
179179

180-
// Teach some ESLint tricks.
180+
// Teach some ESLint / TSLint tricks.
181181
console.log(
182182
'\nSearch for the ' +
183183
chalk.underline(chalk.yellow('keywords')) +
@@ -186,6 +186,9 @@ function createCompiler(webpack, config, appName, urls, useYarn) {
186186
console.log(
187187
'To ignore, add ' +
188188
chalk.cyan('// eslint-disable-next-line') +
189+
' (or ' +
190+
chalk.cyan('// tslint:disable-next-line') +
191+
' if TypeScript)' +
189192
' to the line before.\n'
190193
);
191194
}

packages/react-scripts/config/paths.js

+3
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ function getServedPath(appPackageJson) {
4949

5050
const isFlow = fs.existsSync(resolveApp('.flowconfig'));
5151
const isTypeScript = fs.existsSync(resolveApp('tsconfig.json'));
52+
const useTSLint = isTypeScript && fs.existsSync(resolveApp('tslint.json'));
5253

5354
// config after eject: we're in ./config/
5455
module.exports = {
@@ -131,6 +132,8 @@ module.exports.isFlow = isFlow;
131132

132133
module.exports.isTypeScript = isTypeScript;
133134

135+
module.exports.useTSLint = useTSLint;
136+
134137
module.exports.useYarn = fs.existsSync(
135138
path.join(module.exports.appPath, 'yarn.lock')
136139
);

packages/react-scripts/config/webpack.config.dev.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,7 @@ module.exports = {
187187

188188
// First, run the linter.
189189
// It's important to do this before Babel processes the JS.
190-
{
190+
!paths.isTypeScript && {
191191
test: /\.(js|jsx|mjs)$/,
192192
enforce: 'pre',
193193
use: [
@@ -366,7 +366,7 @@ module.exports = {
366366
},
367367
// ** STOP ** Are you adding a new loader?
368368
// Make sure to add the new loader(s) before the "file" loader.
369-
],
369+
].filter(Boolean),
370370
},
371371
plugins: [
372372
// Generates an `index.html` file with the <script> injected.
@@ -411,6 +411,7 @@ module.exports = {
411411
new ForkTsCheckerWebpackPlugin({
412412
async: false,
413413
watch: paths.appSrc,
414+
tslint: paths.useTSLint,
414415
}),
415416
].filter(Boolean),
416417

packages/react-scripts/config/webpack.config.prod.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -225,7 +225,7 @@ module.exports = {
225225

226226
// First, run the linter.
227227
// It's important to do this before Babel processes the JS.
228-
{
228+
!paths.isTypeScript && {
229229
test: /\.(js|jsx|mjs)$/,
230230
enforce: 'pre',
231231
use: [
@@ -399,7 +399,7 @@ module.exports = {
399399
// Make sure to add the new loader(s) before the "file" loader.
400400
],
401401
},
402-
],
402+
].filter(Boolean),
403403
},
404404
plugins: [
405405
// Generates an `index.html` file with the <script> injected.
@@ -483,6 +483,7 @@ module.exports = {
483483
new ForkTsCheckerWebpackPlugin({
484484
async: false,
485485
watch: paths.appSrc,
486+
tslint: paths.useTSLint,
486487
}),
487488
].filter(Boolean),
488489
// Some libraries import Node modules but don't use them in the browser.

packages/react-scripts/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@
6666
"svgr": "1.9.2",
6767
"sw-precache-webpack-plugin": "0.11.5",
6868
"thread-loader": "1.1.5",
69+
"tslint": "^5",
6970
"typescript": "^3",
7071
"uglifyjs-webpack-plugin": "1.2.5",
7172
"url-loader": "1.0.1",

packages/react-scripts/scripts/build.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,11 @@ checkBrowsers(paths.appPath)
9090
);
9191
console.log(
9292
'To ignore, add ' +
93-
chalk.cyan('// eslint-disable-next-line') +
93+
chalk.cyan(
94+
paths.isTypeScript
95+
? '// tslint:disable-next-line'
96+
: '// eslint-disable-next-line'
97+
) +
9498
' to the line before.\n'
9599
);
96100
} else {

packages/react-scripts/template/README.md

+29-24
Original file line numberDiff line numberDiff line change
@@ -949,32 +949,37 @@ To add TypeScript to a Create React App project, follow these steps:
949949
}
950950
```
951951

952-
4. [optional] Create a `tslint.json` file with the following content:
952+
4. [optional] Setup TSLint
953953

954-
```
955-
{
956-
"defaultSeverity": "warning",
957-
"extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
958-
"linterOptions": {
959-
"exclude": [
960-
"node_modules/**",
961-
"build/**"
962-
]
963-
},
964-
"jsRules": {
965-
"curly": true,
966-
"no-console": false
967-
},
968-
"rules": {
969-
"curly": true,
970-
"no-console": false,
971-
"member-access": false
972-
},
973-
"rulesDirectory": []
974-
}
975-
```
954+
1. Create a `tslint.json` file with the following content:
955+
956+
```
957+
{
958+
"defaultSeverity": "warning",
959+
"extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
960+
"linterOptions": {
961+
"exclude": [
962+
"node_modules/**",
963+
"build/**"
964+
]
965+
},
966+
"jsRules": {
967+
"curly": true,
968+
"no-console": false
969+
},
970+
"rules": {
971+
"curly": true,
972+
"no-console": false,
973+
"member-access": false
974+
},
975+
"rulesDirectory": []
976+
}
977+
```
978+
979+
2. Run `npm install --dev tslint-react tslint-config-prettier` (or `yarn add --dev tslint-react tslint-config-prettier`).
980+
981+
Type errors will show up in the console.
976982
977-
Now you can run `npm run type-check` (or `yarn type-check`) to check the files for type errors.
978983
We recommend using [VSCode](https://code.visualstudio.com/) for a better integrated experience.
979984
980985
To learn more about TypeScript, check out [its documentation](https://www.typescriptlang.org/).

packages/react-scripts/template/src/App.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import React, { Component } from 'react';
2-
import logo from './logo.svg';
2+
33
import './App.css';
44

5+
import logo from './logo.svg';
6+
57
class App extends Component {
68
render() {
79
return (

packages/react-scripts/template/src/index.js

+2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
3+
34
import './index.css';
5+
46
import App from './App';
57
import * as serviceWorker from './serviceWorker';
68

0 commit comments

Comments
 (0)