diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index 2e216c5d..00000000 Binary files a/.DS_Store and /dev/null differ diff --git a/.gitignore b/.gitignore index e8a005ce..4fc7112f 100644 --- a/.gitignore +++ b/.gitignore @@ -15,3 +15,6 @@ node_modules # Editor directories and files .idea + +# Mac OS +.DS_Store diff --git a/README.md b/README.md index d1026985..09a8176b 100644 --- a/README.md +++ b/README.md @@ -65,6 +65,10 @@ module.exports = { If you are using **TypeScript >= 2.8.0**, it's recommended to set `"importsNotUsedAsValues": "preserve"` [compiler option](https://www.typescriptlang.org/docs/handbook/compiler-options.html) in the `tsconfig.json`. [Here is an explanation.](#type-only-modules-watching) +> You can find examples how to configure it with [babel-loader](https://github.com/babel/babel-loader), [ts-loader](https://github.com/TypeStrong/ts-loader), +> [eslint](https://github.com/eslint/eslint) and [Visual Studio Code](https://code.visualstudio.com/) in the +> [**examples**](./examples) directory. + ## Modules resolution It's very important to be aware that **this plugin uses [TypeScript](https://github.com/Microsoft/TypeScript)'s, not @@ -97,7 +101,7 @@ module.exports = { plugins: [ new ForkTsCheckerWebpackPlugin({ eslint: { - files: './src/**/*.ts' // required - same as command `eslint ./src/**/*.ts` + files: './src/**/*' // required - same as command `eslint ./src/**/* --ext .ts,.tsx,.js,.jsx` } }) ] @@ -108,19 +112,15 @@ You should also have an ESLint configuration file in your root project directory Here is a sample `.eslintrc.js` configuration for a TypeScript project: ```js -const path = require('path'); - module.exports = { - parser: '@typescript-eslint/parser', // specifies the ESLint parser - extends: [ - 'plugin:@typescript-eslint/recommended' // uses the recommended rules from the @typescript-eslint/eslint-plugin - ], + parser: '@typescript-eslint/parser', 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 + ecmaVersion: 2018, + sourceType: 'module', }, + extends: [ + 'plugin:@typescript-eslint/recommended' + ], 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", diff --git a/examples/.DS_Store b/examples/.DS_Store deleted file mode 100644 index 69e3bc2c..00000000 Binary files a/examples/.DS_Store and /dev/null differ diff --git a/examples/eslint/.eslintrc.js b/examples/eslint/.eslintrc.js new file mode 100644 index 00000000..bac86922 --- /dev/null +++ b/examples/eslint/.eslintrc.js @@ -0,0 +1,8 @@ +module.exports = { + parser: '@typescript-eslint/parser', + parserOptions: { + ecmaVersion: 2018, + sourceType: 'module' + }, + extends: ['plugin:@typescript-eslint/recommended'] +}; diff --git a/examples/eslint/README.md b/examples/eslint/README.md new file mode 100644 index 00000000..f9bbaad8 --- /dev/null +++ b/examples/eslint/README.md @@ -0,0 +1,3 @@ +## eslint configuration example + +It's a basic configuration of the plugin and [eslint](https://github.com/eslint/eslint). diff --git a/examples/eslint/package.json b/examples/eslint/package.json new file mode 100644 index 00000000..c50552b4 --- /dev/null +++ b/examples/eslint/package.json @@ -0,0 +1,22 @@ +{ + "name": "fork-ts-checker-webpack-plugin-ts-loader-example", + "version": "0.0.0", + "main": "dist/index.js", + "license": "MIT", + "scripts": { + "dev": "webpack-dev-server", + "build": "webpack -p" + }, + "devDependencies": { + "@types/eslint": "^6.8.0", + "@typescript-eslint/eslint-plugin": "^2.27.0", + "@typescript-eslint/parser": "^2.27.0", + "eslint": "^6.8.0", + "fork-ts-checker-webpack-plugin": "^5.0.0-alpha.9", + "ts-loader": "^7.0.0", + "typescript": "^3.8.0", + "webpack": "^4.0.0", + "webpack-cli": "^3.0.0", + "webpack-dev-server": "^3.0.0" + } +} diff --git a/examples/eslint/src/index.ts b/examples/eslint/src/index.ts new file mode 100644 index 00000000..7bc4a71d --- /dev/null +++ b/examples/eslint/src/index.ts @@ -0,0 +1 @@ +console.log('Hello world'); diff --git a/examples/eslint/tsconfig.json b/examples/eslint/tsconfig.json new file mode 100644 index 00000000..c2a0076e --- /dev/null +++ b/examples/eslint/tsconfig.json @@ -0,0 +1,18 @@ +{ + "compilerOptions": { + "target": "ES5", + "module": "CommonJS", + "lib": ["ES5", "ScriptHost"], + "moduleResolution": "Node", + "esModuleInterop": true, + "skipLibCheck": true, + "skipDefaultLibCheck": true, + "strict": true, + "baseUrl": "./src", + "outDir": "./dist", + "forceConsistentCasingInFileNames": true, + "importsNotUsedAsValues": "preserve" // this is important for proper files watching + }, + "include": ["./src"], + "exclude": ["node_modules"] +} diff --git a/examples/eslint/webpack.config.js b/examples/eslint/webpack.config.js new file mode 100644 index 00000000..9f4f4350 --- /dev/null +++ b/examples/eslint/webpack.config.js @@ -0,0 +1,29 @@ +const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); + +module.exports = { + context: __dirname, + entry: './src/index.ts', + resolve: { + extensions: ['.ts', '.tsx', '.js'], + }, + module: { + rules: [ + { + test: /\.tsx?$/, + loader: 'ts-loader', + exclude: /node_modules/, + options: { + transpileOnly: true, + }, + }, + ], + }, + plugins: [ + new ForkTsCheckerWebpackPlugin({ + eslint: { + enabled: true, + files: './src/**/*', + }, + }), + ], +}; diff --git a/examples/vscode-tasks/README.md b/examples/vscode-tasks/README.md index 7213624e..eb81a023 100644 --- a/examples/vscode-tasks/README.md +++ b/examples/vscode-tasks/README.md @@ -1,7 +1,7 @@ -## VS Code configuration example +## Visual Studio Code configuration example -This example defines `.vscode/tasks.json` file which instructs **VS Code** how to extract errors from the webpack's output +This example defines `.vscode/tasks.json` file which instructs **Visual Studio Code** how to extract errors from the webpack's output to display them in the **Problems** tab. It uses [TypeScript + Webpack Problem Matchers](https://marketplace.visualstudio.com/items?itemName=eamodio.tsl-problem-matcher) provided by @eamodio :heart: -> Tip: You can use the npm type tasks even with yarn if you set "npm.packageManager": "yarn" in your VS Code settings +> Tip: You can use the npm type tasks even with yarn if you set "npm.packageManager": "yarn" in your Visual Studio Code settings diff --git a/src/eslint-reporter/EsLintReporterConfiguration.ts b/src/eslint-reporter/EsLintReporterConfiguration.ts index ea05f9c1..ee9d1f7a 100644 --- a/src/eslint-reporter/EsLintReporterConfiguration.ts +++ b/src/eslint-reporter/EsLintReporterConfiguration.ts @@ -36,7 +36,7 @@ function createEsLintReporterConfiguration( ), options: { cwd: compiler.options.context || process.cwd(), - extensions: ['.js', '.ts', '.tsx'], + extensions: ['.ts', '.tsx', '.js', '.jsx'], ...(typeof options === 'object' ? options.options || {} : {}), }, }; diff --git a/src/eslint-reporter/reporter/EsLintReporter.ts b/src/eslint-reporter/reporter/EsLintReporter.ts index 07fc64ca..ac453d6b 100644 --- a/src/eslint-reporter/reporter/EsLintReporter.ts +++ b/src/eslint-reporter/reporter/EsLintReporter.ts @@ -31,10 +31,16 @@ function createEsLintReporter(configuration: EsLintReporterConfiguration): Repor lintReports.push(engine.executeOnFiles(includedFilesPatterns)); isInitialRun = false; } else { - const changedAndIncludedFiles = changedFiles.filter((changedFile) => - includedFilesPatterns.some((includedFilesPattern) => - minimatch(changedFile, includedFilesPattern) - ) + // we need to take care to not lint files that are not included by the configuration. + // the eslint engine will not exclude them automatically + const changedAndIncludedFiles = changedFiles.filter( + (changedFile) => + includedFilesPatterns.some((includedFilesPattern) => + minimatch(changedFile, includedFilesPattern) + ) && + (configuration.options.extensions || []).some((extension) => + changedFile.endsWith(extension) + ) ); if (changedAndIncludedFiles.length) { diff --git a/test/e2e/EsLint.spec.ts b/test/e2e/EsLint.spec.ts index 20569791..85fec546 100644 --- a/test/e2e/EsLint.spec.ts +++ b/test/e2e/EsLint.spec.ts @@ -47,8 +47,8 @@ describe('EsLint', () => { // test case for providing absolute path to files await sandbox.patch( 'webpack.config.js', - "files: './src/**/*.ts'", - "files: path.resolve(__dirname, './src/**/*.ts')" + "files: './src/**/*'", + "files: path.resolve(__dirname, './src/**/*')" ); } @@ -99,6 +99,23 @@ describe('EsLint', () => { // next iteration should have no errors await driver.waitForNoErrors(); + // add a file that shouldn't be linted + await sandbox.write('src/style.css', 'body { background: red; }'); + await sandbox.patch( + 'src/index.ts', + "import { getUserName } from './model/User';", + "import { getUserName } from './model/User';\nimport './style.css';" + ); + + // next iteration should have no errors + await driver.waitForNoErrors(); + + // modify the css again + await sandbox.patch('src/style.css', 'body { background: red; }', 'body { background: blue; }'); + + // next iteration should have no errors + await driver.waitForNoErrors(); + // add a new error await sandbox.patch( 'src/model/User.ts', diff --git a/test/e2e/fixtures/environment/eslint-basic.fixture b/test/e2e/fixtures/environment/eslint-basic.fixture index ecf6bfcc..d61c08c1 100644 --- a/test/e2e/fixtures/environment/eslint-basic.fixture +++ b/test/e2e/fixtures/environment/eslint-basic.fixture @@ -11,8 +11,10 @@ "@types/eslint": "^6.8.0", "@typescript-eslint/eslint-plugin": "^2.27.0", "@typescript-eslint/parser": "^2.27.0", + "css-loader": "^3.5.0", "eslint": "^6.8.0", "fork-ts-checker-webpack-plugin": ${FORK_TS_CHECKER_WEBPACK_PLUGIN_VERSION}, + "style-loader": "^1.2.0", "ts-loader": ${TS_LOADER_VERSION}, "typescript": ${TYPESCRIPT_VERSION}, "webpack": ${WEBPACK_VERSION}, @@ -61,6 +63,10 @@ module.exports = { }, module: { rules: [ + { + test: /\.css$/i, + use: ['style-loader', 'css-loader'], + }, { test: /\.tsx?$/, loader: 'ts-loader', @@ -79,7 +85,7 @@ module.exports = { async: ${ASYNC}, eslint: { enabled: true, - files: './src/**/*.ts' + files: './src/**/*' }, logger: { infrastructure: "console"