diff --git a/docusaurus/docs/setting-up-your-editor.md b/docusaurus/docs/setting-up-your-editor.md index d99dca818cf..869592d2915 100644 --- a/docusaurus/docs/setting-up-your-editor.md +++ b/docusaurus/docs/setting-up-your-editor.md @@ -28,6 +28,19 @@ You would need to install an ESLint plugin for your editor first. Then, add a fi } ``` +If you're using TypeScript and Visual Studio Code, the [ESLint Visual Studio Code extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint#overview) currently [doesn't have TypeScript support enabled by default](https://github.com/Microsoft/vscode-eslint/issues/609). To enable TypeScript support in the ESLint extension, add the following to your project's Visual Studio Code settings file, located at `.vscode/settings.json` (you can create this file if it doesn't already exist): + +```json +{ + "eslint.validate": [ + "javascript", + "javascriptreact", + { "language": "typescript", "autoFix": true }, + { "language": "typescriptreact", "autoFix": true } + ] +} +``` + Now your editor should report the linting warnings. Note that even if you edit your `.eslintrc.json` file further, these changes will **only affect the editor integration**. They won’t affect the terminal and in-browser lint output. This is because Create React App intentionally provides a minimal set of rules that find common mistakes. diff --git a/packages/eslint-config-react-app/index.js b/packages/eslint-config-react-app/index.js index f83ed06a104..816dca1b4e5 100644 --- a/packages/eslint-config-react-app/index.js +++ b/packages/eslint-config-react-app/index.js @@ -21,7 +21,17 @@ // This is dangerous as it hides accidentally undefined variables. // We blacklist the globals that we deem potentially confusing. // To use them, explicitly reference them, e.g. `window.name` or `window.status`. -var restrictedGlobals = require('confusing-browser-globals'); +const restrictedGlobals = require('confusing-browser-globals'); + +// The following is copied from `react-scripts/config/paths.js`. +const path = require('path'); +const fs = require('fs'); +// Make sure any symlinks in the project folder are resolved: +// https://github.com/facebook/create-react-app/issues/637 +const appDirectory = fs.realpathSync(process.cwd()); +const resolveApp = relativePath => path.resolve(appDirectory, relativePath); +const projectRootPath = resolveApp('.'); +const tsConfigPath = resolveApp('tsconfig.json'); module.exports = { root: true, @@ -52,6 +62,45 @@ module.exports = { }, }, + overrides: { + files: ['**/*.ts', '**/*.tsx'], + parser: '@typescript-eslint/parser', + parserOptions: { + ecmaVersion: 2018, + sourceType: 'module', + ecmaFeatures: { + jsx: true, + }, + + // typescript-eslint specific options + project: tsConfigPath, + tsconfigRootDir: projectRootPath, + warnOnUnsupportedTypeScriptVersion: true, + }, + plugins: ['@typescript-eslint'], + rules: { + // These ESLint rules are known to cause issues with typescript-eslint + // See https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/src/configs/recommended.json + camelcase: 'off', + indent: 'off', + 'no-array-constructor': 'off', + 'no-unused-vars': 'off', + + '@typescript-eslint/no-angle-bracket-type-assertion': 'warn', + '@typescript-eslint/no-array-constructor': 'warn', + '@typescript-eslint/no-namespace': 'error', + '@typescript-eslint/no-unused-vars': [ + 'warn', + { + args: 'none', + ignoreRestSiblings: true, + }, + ], + }, + }, + + // NOTE: When adding rules here, you need to make sure they are compatible with + // `typescript-eslint`, as some rules such as `no-array-constructor` aren't compatible. rules: { // http://eslint.org/docs/rules/ 'array-callback-return': 'warn', diff --git a/packages/eslint-config-react-app/package.json b/packages/eslint-config-react-app/package.json index 24fb6d4f5f3..5c386196630 100644 --- a/packages/eslint-config-react-app/package.json +++ b/packages/eslint-config-react-app/package.json @@ -11,6 +11,8 @@ "index.js" ], "peerDependencies": { + "@typescript-eslint/eslint-plugin": "1.x", + "@typescript-eslint/parser": "1.x", "babel-eslint": "9.x", "eslint": "5.x", "eslint-plugin-flowtype": "2.x", diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index f6c0e7a237a..51d6ce9c728 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -304,7 +304,7 @@ module.exports = function(webpackEnv) { // First, run the linter. // It's important to do this before Babel processes the JS. { - test: /\.(js|mjs|jsx)$/, + test: /\.(js|mjs|jsx|ts|tsx)$/, enforce: 'pre', use: [ { diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index b17fd14ce30..c290580f1c6 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -26,6 +26,8 @@ "dependencies": { "@babel/core": "7.2.2", "@svgr/webpack": "4.1.0", + "@typescript-eslint/eslint-plugin": "1.4.1", + "@typescript-eslint/parser": "1.4.1", "babel-core": "7.0.0-bridge.0", "babel-eslint": "9.0.0", "babel-jest": "23.6.0",