I'm using the ESLint plugin for Jest to lint my Jest tests. The structure of my project is
my-project
|
|--tests
|
|--unit
|
|--e2e
I only want to use the Jest plugin when linting files in the tests/unit dir (because the files in tests/e2e are not Jest tests), but when I run the linting, this plugin is applied to all files under tests/unit, which results in spurious errors in the tests/e2e files.
I can disable individual rules in the tests/e2e dir by adding the following to eslintrc.js
module.exports = {
root: true,
env: {
node: true,
'jest/globals': true
},
extends: [
'eslint:recommended',
'plugin:jest/recommended',
],
parserOptions: {
parser: 'babel-eslint'
},
plugins: ['jest'],
"overrides": [
{
"files": ["tests/e2e/*.js"],
"rules": {
"jest/no-disabled-tests": "off",
"jest/expect-expect": "off",
"jest/valid-expect-in-promise": "off"
}
}
]
}
But rather than disabling individual rules in the tests/e2e dir, I would like to disable the Jest plugin completely.
From the eslint docs regarding overrides:
A glob specific configuration works almost the same as any other ESLint config. Override blocks can contain any configuration options that are valid in a regular config, with the exception of root and ignorePatterns.
Credit to the SO answer that helped me: Eslint allow multiple parsers based on glob patterns
The example in that answer also demonstrates overriding plugins.
My example uses two overrides sections, one for JavaScript files and one for TypeScript. This could easily be two different directories.
{
"overrides": [
{
"files": "**/*.ts",
"plugins": [
"prettier",
"#typescript-eslint"
],
"extends": [
"eslint-config-prettier",
"prettier",
"prettier/#typescript-eslint",
"plugin:import/errors",
"plugin:import/warnings",
"plugin:import/typescript",
"plugin:#typescript-eslint/recommended",
"plugin:#typescript-eslint/recommended-requiring-type-checking",
"plugin:prettier/recommended"
],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.json"
},
"rules": {
}
},
{
// Disabling TypeScript lint rules for JS files.
"files": "**/*.js",
"plugins": [
"prettier"
],
"extends": [
"esnext",
"eslint-config-prettier",
"prettier",
"plugin:import/errors",
"plugin:import/warnings",
"plugin:prettier/recommended"
],
"parser": "babel-eslint",
"parserOptions": {
},
"env": {
"node": true
},
"rules": {
}
}
]
}
Encountered the same issue and haven't found a built in solution in eslint's config files, but you can try something that worked for me: ignore the E2E tests pattern in the main eslintrc.js and create another eslintrc.js file nested in the E2E directory.
as follows:
my-project
|-- eslintrc.js // this is your main eslint config
|--tests
|
|--unit
|
|--e2e
|
|-- eslintrc.js // nested eslintrc without the "jest" plugin
Note that you would have to tell the babel-eslint parser in the nested eslintrc where the babel config files is (usually as part of the parserOptions) since it is no longer in the same directory.
Main eslintrc.js:
module.exports = {
root: true,
env: {
node: true,
'jest/globals': true
},
extends: [
'eslint:recommended',
'plugin:jest/recommended',
],
parser: 'babel-eslint'
plugins: ['jest'],
ignorePatterns: ["tests/e2e/*.js"]
}
Nested eslintrc.js file in tests/e2e/:
module.exports = {
root: true,
env: {
node: true
},
extends: ['eslint:recommended'],
parser: 'babel-eslint',
parserOptions: {
babelOptions: {
configFile: '../../babel.config.js' // assuming this is the name of your babel config file in the project root
}
}
}
You can use ignorePatterns in your config file or create a .eslintignore file.
See: https://eslint.org/docs/user-guide/configuring#ignoring-files-and-directories
Related
I have a react native application that doesn't follow the convention of having all files in src directory. It appears eslint looks for the src directory by default.
How can I tell eslint to look for ./components', ./screens' etc instead?
Passing in the path when running eslint works but that means those files only get checked when that command gets ran instead of allowing my text editor to detect issues.
"lint": "eslint ./**/*.tsx"
I have tried adding include paths to my eslint config too but that doesn't make any difference.
module.exports = {
env: {
browser: true,
es2021: true,
'react-native/react-native': true,
},
extends: [
'plugin:react/recommended',
'standard-with-typescript',
'plugin:react-native-a11y/android'
],
overrides: [
],
parser: '#typescript-eslint/parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: './tsconfig.json'
},
plugins: [
'react',
'react-native'
],
rules: {
indent: ['error', 2],
'linebreak-style': [
'error',
'unix'
],
semi: [
'error',
'always'
]
},
includePaths: ["./**/*.tsx"] // this doesn't seem to have any effect
};
I want to be able to run eslint and not have to pass in any optional args as it should be defined already within my eslint config.
I am getting this error
/home/runner/work/toDoList/toDoList/webpack.config.js
2:35 error Unable to resolve path to module 'html-webpack-plugin' import/no-unresolved
on my linters run by GitHub actions.
I do not get this error when I run eslint locally; this only happens in GitHub actions. These solutions did not work for me.
How to manually add a path to be resolved in eslintrc
Using eslint with typescript - Unable to resolve path to module
eslint / typescript: Unable to resolve path to module
Why I got error Unable to resolve path to module? Eslint with Typescript
https://www.appsloveworld.com/reactjs/200/340/sublime-eslint-plugin-unable-to-resolve-path-to-module-while-the-path-exist
Here is my webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
devtool: 'inline-source-map',
devServer: {
static: './dist',
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
],
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
};
And my .eslintrc.json
{
"env": {
"browser": true,
"es6": true,
"jest": true
},
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
"extends": ["airbnb-base"],
"rules": {
"no-shadow": "off",
"no-param-reassign": "off",
"eol-last": "off",
"import/extensions": [ 1, {
"js": "always", "json": "always"
}]
},
"ignorePatterns": [
"dist/",
"build/"
]
}
Here is the pull request with error if I'm missing something.
Turns out my html-webpack-plugin wasn't getting installed in the GitHub actions environment because it wasn't in linters.yml file. Adding npm install html-webpack-plugin in linters.yml solved the issue.
#shasherazi is right, in my case I added it like below under eslint
run: | npm install html-webpack-plugin
just before the eslint install command in linters.yml file
I'm getting the following error when I run npm run test:
jest-haste-map: Haste module naming collision: {{name}}
The following files share their name; please adjust your hasteImpl:
* <rootDir>/packages/some-package/templates/js/package.json
* <rootDir>/packages/some-package/templates/ts/package.json
My jest.config looks like
module.exports = {
collectCoverage: true,
setupFiles: ['<rootDir>/jest.setup.js'],
preset: 'ts-jest',
testEnvironment: 'jsdom',
collectCoverageFrom: [
'<rootDir>/packages/**/__tests__/**/*.ts',
'!<rootDir>/packages/**/templates/**/*.ts',
],
testMatch: [
'<rootDir>/packages/**/*.test.ts'
],
transform: {
'^.+\\.js?$': '<rootDir>/node_modules/babel-jest'
},
testPathIgnorePatterns: [
'/node_modules/',
],
coveragePathIgnorePatterns: [
'/node_modules/',
],
projects: [
'<rootDir>/packages/*/jest.config.js'
]
};
Not sure what the warning is, and how I can fix it.
I got this warning as a result of package.json existing in my root directory and in my build directory. I was able to get rid of it by specifying that I only want Jest to look for tests in src by adding the following to my package.json:
"jest": {
"roots": ["src"]
}
I am currently trying to convert our existing vue.js project into nuxt.js. I am unable to add flowtype support in nuxt.js. when i run the flow server it says no errors!! but running npm run dev, its throwing error on the flow syntax.
.flowconfig
[include]
pages/**/.*
components/**/.*
layouts/**/.*
apiRoutes/.*
store/.*
utils/.*
[ignore]
.*/build/.*
.*/config/.*
.*/dist/.*
.*/node_modules/.*
.*/static/.*
.*/test/.*
.*/ssl/.*
.*/.nuxt/.*
[libs]
./flow/
[options]
emoji=true
module.file_ext=.vue
module.file_ext=.js
server.max_workers=3
log.file=./flow.log
suppress_comment= \\(.\\|\n\\)*\\$FlowFixMe
unsafe.enable_getters_and_setters=true
module.system.node.resolve_dirname=node_modules
module.name_mapper='^.*\.css$' -> 'empty/object'
module.name_mapper='^.*\.js$' -> 'empty/object'
module.name_mapper='^#/\(.*\)$' -> '<PROJECT_ROOT>/\1'
i've added all the neccessary babel and eslint packages.
.babelrc
{
"presets": [
["env", { "modules": false }],
"stage-2",
["es2015", {"modules": false }],
"flow-vue"
],
"plugins": [
"transform-runtime",
"transform-class-properties",
"syntax-flow",
"transform-flow-strip-types"
],
"comments": false,
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": [ "istanbul" ]
}
}
}
.eslintrc.js
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
env: {
browser: true,
node: true,
jquery: true
},
extends: [
'standard',
'plugin:flowtype/recommended'
// 'plugin:vue/recommended'
],
// required to lint *.vue files
plugins: [
'html',
'flowtype-errors',
'flowtype'
],
// add your custom rules here
rules: {
'flowtype-errors/show-errors': 2,
// allow paren-less arrow functions
'arrow-parens': 0,
'semi': ["error", "always"],
// allow async-await
'generator-star-spacing': 0
},
globals: {}
}
On running npm run dev, it doesnt parse flowtype syntax
I suggest following the instructions on the flow website to set up Babel. In particular there is a preset, so you shouldn't need to configure individual rules. Then you'll actually need to run Babel (again, instructions are on the website). Once you have run Babel, you should be able to run the code it outputs in Node.
I'm new to Angular 2. I'm using ng2-charts for my angular 2 project. ng2-charts requires Chart.js to be embedded in my application header, as such:
<script src="node_modules/chart.js/src/chart.js"></script>
From my index.html I can't access nodes_modules (Error: GET http://localhost:4200/node_modules/chart.js/dist/Chart.js) . From what I understand it's because node_modules are not 'compiled' into the dist folder.
Thus I need to add chart.js as a Global Library Installation (as explained here: https://github.com/angular/angular-cli#global-library-installation)
When I do this I get "Uncaught ReferenceError: require is not defined". I assume it's because chart.js is being loaded before systemJS and thus does not know 'require'. I tryed adding systemJS before chart.js in apps[0].scripts but that does not work either.
Here's my angular-cli.json:
{
"project": {
"version": "1.0.0-beta.16",
"name": "poc1-iot-monitor-frontend"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": "assets",
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"styles.css"
],
"scripts": [
"../node_modules/systemjs/dist/system.src.js",
"../node_modules/chart.js/src/chart.js"
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false
}
}
How would I go about embedding Chart.js or any other external js library?
I'm using angular-cli: 1.0.0-beta.16. node: 4.4.2. npm: 3.10.6. webpack 2.1.0-beta.22.
Turned out I was linking to the wrong file from my angular-cli.json. Changing angular-cli.json apps[0].scripts to:
...],
"scripts": [
"../node_modules/chart.js/dist/Chart.js"
],
...
did the trick. Also no need to link from index.html anymore.
Thanks to asotog for pointing me in the right direction.
--- EDIT (BONUS INFO) ---
For those wanting to add external libraries to your tests, add them via the karma.conf.js files array:
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', 'angular-cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-remap-istanbul'),
require('angular-cli/plugins/karma')
],
files: [
{ pattern: "node_modules/chart.js/dist/Chart.js", included: true, watched: false },
{ pattern: './src/test.ts', watched: false }
],
preprocessors: {
'./src/test.ts': ['angular-cli']
},
remapIstanbulReporter: {
reports: {
html: 'coverage',
lcovonly: './coverage/coverage.lcov'
}
},
angularCli: {
config: './angular-cli.json',
environment: 'dev'
},
reporters: ['progress', 'karma-remap-istanbul'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};
I have no experience using Chart.js, but per you angular cli config seems you are pointing to the non compiled version of chart js that's why the require errors, you should point to the bundled version.
Based on chart js docs there are some gulp build tasks dedicated to generate the bundle see here https://github.com/chartjs/Chart.js#building-and-testing