I've set up the grunt-eslint in my gruntfile.js, but when I run the "grunt eslint", nothing happends. The task looks like it would start but just stands still even after 15min.
All my other tasks works just fine, all except eslint wich shows no errors or anything.
gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
eslint: {
options: {
configFile: '.eslintrc.json'
},
target: ['src/js/*.js']
},
})
grunt.loadNpmTasks('grunt-eslint');
grunt.registerTask('eslint', [
'eslint',
]);
}
.eslintrc.json
{
"env": {
"browser": true
},
"extends": "eslint:recommended",
"rules": {
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"windows"
],
"quotes": [
"error",
"double"
],
"semi": [
"error",
"always"
]
}
}
Both the gruntfile and .eslintrc.json is in root
Does anyone know what it is that can cause this? Is my setup wrong?
I had the same problem.
If you add --verbose option when running:
grunt eslint --verbose
You'll see that your task is running repeatedly - because you named your task eslint(which is the same name as already registered eslint task) grunt falls into infinite loop.
Change
grunt.registerTask('eslint', [
'eslint',
]);
to:
grunt.registerTask('myeslinttask', [
'eslint',
]);
and run:
grunt myeslinttask
the problem of:
grunt.registerTask('eslint', [
'eslint',
]);
is that it will call it self forever, just delete this registerTask command
and run grunt eslint , that will be enough to
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
Created a new React project. There is almost nothing there -- just SSR, code splitting and a couple of 'hello world!' pages. On top of eslint added prettier. Before I added prettier the lint used to take 10-15 sec. Now I got +2mins for almost empty project:
time yarn lint
yarn lint 3.19s user 0.49s system 2% cpu 2:35.39 total
Thought that I'm linting node_modules. In order to check that updated 2 files:
// node_modules/eslint/lib/rules/no-unused-vars.js
...
create(context) {
const sourceCode = context.getSourceCode();
// ########### LOG #############
console.log(`eslint processing file [${+new Date()}] ${context.getFilename()}`);
const REST_PROPERTY_TYPE = /^(?:RestElement|(?:Experimental)?RestProperty)$/u;
and
// node_modules/eslint-plugin-prettier/eslint-plugin-prettier.js
...
const prettierFileInfo = prettier.getFileInfo.sync(
filepath,
Object.assign(
{},
{ resolveConfig: true, ignorePath: '.prettierignore' },
eslintFileInfoOptions
)
);
// ############## LOG ########################
console.log('Prettier processing file', filepath);
// Skip if file is ignored using a .prettierignore file
if (prettierFileInfo.ignored) {
Would really appreciate it if you could tell me a better way to list processed files. A trick with
"scripts": {
...
"lint": " DEBUG=eslint:* eslint --ext .js --fix server src tools",
gave too much data.
Not sure do I even need this file
# .prettierignore
# Ignore everything:
/*
# Good guys
!/src
!/server
!/tools
The output showed me that difference between timestamps of the first and the last file is ~1.5 sec.
eslint processing file [1592686834050] /Users/...
Prettier processing file...
....
eslint processing file [1592686835724] /Users/...
Prettier processing file ...
Just wondering, what for are used the rest of 1500 sec?
.eslintrc file
{
"parser": "babel-eslint",
"extends": [
"airbnb",
"plugin:prettier/recommended"
],
"env": {
"browser" : true,
"jest": true
},
"plugins": [
"prettier",
"react-hooks",
"jsdoc",
"jest"
],
"rules": {
"max-len": [2, 120],
"react/jsx-wrap-multilines": ["error", {"declaration": false, "assignment": false}],
"import/prefer-default-export": 0,
"react/jsx-filename-extension": 0,
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"arrow-body-style": ["error", "as-needed"],
"curly": ["error", "all"],
"jsdoc/check-indentation": "error",
"jsdoc/check-param-names": "error",
"jsdoc/check-property-names": "error",
"jsdoc/check-tag-names": "error",
"jsdoc/require-hyphen-before-param-description": ["error", "never"],
"jsdoc/require-param-description": "error",
"jsdoc/require-param-name": "error",
"jsdoc/require-param-type": "error",
"jsdoc/require-param": "error",
"jsdoc/require-property": "error",
"jsdoc/require-property-name": "error",
"jsdoc/require-property-type": "error",
"jsdoc/require-returns-description": "error",
"jsdoc/require-returns-type": "error",
"jsdoc/require-returns": "error"
},
"settings": {
"import/resolver": {
"node": {
"paths": ["src", "server", "tools"]
}
}
},
"overrides": [
{
"files": [ "**/*.stories.js", "**/*.story.js" ],
"rules": {
"import/no-extraneous-dependencies": 0
}
}
]
}
Restarted Mac and got a normal processing time (~4 secs):
time yarn lint
yarn lint 4.09s user 0.61s system 109% cpu 4.279 total
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
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.