The error is because of this line of code
item.component = () => import(`#/views/${_component}`)
If I modify .eslintrc.js, it works
'indent' : "off",
'template-curly-spacing' : "off",
But this way, eslint won't help me format the code
when I run the following code, He can't work, but eslint has no errors:
item.component = () => import(`#/views/` + _component)
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.0.1",
"eslint": "5.15.3",
node -v: v12.9.1
eslint -v: v6.8.0
vscode
Try setting your eslint indent rule to contain: ignoredNodes for template literals. My eslintrc.js has the following:
rules: {
indent: [2, "tab", {
ignoredNodes: ["TemplateLiteral"]
}],
... etc ...
}
That will ignore extended template literals.
If the above doesn't work, try deleting package-lock.json and node_modules then re-install with npm i or yarn. This will restore your packages and reset downline versions.
Related
Our repos have a mix of SCSS & newer StyledComponents and I believe having StyleLint try to manage both SCSS & *.css.js StyledComponents conflicts with rules/processors. I currently run this with lintstaged during a commit:
.lintstagedrc file:
{
"**/*.(js|jsx|ts|tsx)": [
"npm run lint:fix",
"npm run prettier:write",
],
"**/*.(css|less|scss)+?(.js)": [
"npm run stylelint",
]
}
Let's say an SCSS file gets updated:
#import '../../../styles/variables.scss';
.account-search-list {
color: $light-grey;
}
and here is my StyledComponent:
export const StyledData = styled.div`
margin-bottom: 0.75rem;
`;
For example, if I try to use this stylelint config, I get an error :
{
"processors": ["stylelint-processor-styled-components"],
"extends": [
"stylelint-config-sass-guidelines",
"stylelint-config-recommended",
"stylelint-config-styled-components"
],
"plugins": ["stylelint-scss"],
"syntax": "scss",
"rules": {
"scss/at-import-partial-extension": "always",
"scss/at-import-partial-extension-blacklist": [".scss"],
"max-nesting-depth": [3, { "ignore": "pseudo-classes", "ignoreAtRules": "media" }],
"selector-max-compound-selectors": [4]
}
}
This returns an error:
src/components/common/AccountSearchList/index.scss
1:1 ✖ Unexpected keyword 'import' (1:1)
Because this is an error with SCSS, let's remove the processors field for StyledComponents 🤷♂️. Well that's good, the import error is gone!! But now there are StyledComponent issues:
7:3 ✖ Expected indentation of 4 spaces indentation
My ESLinter/Prettier formatter requires 2 spaces, but that's OK there's a stylelint rule for that, so I will add: indentation: 2 to the rules above, but that doesn't work either as the processor is missing and likely cannot pickup the JS rules.
So, how can I combine rules, or run certain rules for certain file types?
Thanks!
Following this guide, I have tried to create an extracted rule set except I am extending from eslint-config-airbnb-typescript-prettier instead of eslint-config-airbnb-typescript: -
module.exports = {
extends: "airbnb-typescript-prettier"
}
When I run eslint --print-config blah.js > outfile.json I indeed get the output file but when I try to use the config in that output file in my .eslintrc.js, I get errors such as the following: -
Error: .eslintrc.js:
Configuration for rule "import/no-cycle" is invalid:
Value null should be integer.
Which refers to the rule config from the --print-config command of: -
"import/no-cycle": [
"error",
{
"maxDepth": null
}
],
So why is --print-config outputting invalid configs and is there any way to stop it from happening so I have a valid rule set? Thanks.
It seems that this is a bug in ESLint v7.3.0
A temporary fix would be to downgrade ESLint to v7.2.0
- "eslint": "^7.3.0"
+ "eslint": "7.2.0"
Reference: GitHub
Getting this error
./src/locale/translations.js
Line 4:5: Unexpected template string expression no-template-curly-in-string
Line 6:13: Unexpected template string expression no-template-curly-in-string
And trying to disable for the whole project:
// .eslintrc
{
"rules": {
"no-template-curly-in-string": "off",
"template-curly-in-string": "off"
// "no-template-curly-in-string": 0,
// "template-curly-in-string": 0
// "no-template-curly-in-string": false,
// "template-curly-in-string": false
}
}
None of those work.
Try to update to react-scripts#4.0.0 because I found an issue in the previous version 3.X.X where the eslint was ignored.
Update:
npm install --save --save-exact react-scripts#4.0.0
or
yarn add --exact react-scripts#4.0.0
This works in my case ;)
I was able to disable it with the following:
// package.json
"eslintConfig": {
"extends": "react-app",
"rules": {
"no-template-curly-in-string": "off"
}
The trick was to add EXTEND_ESLINT=true to my environment file after updating package.json, and then restarting my server.
I want to replace few sass variable values inside a sass config file.
For example, I want to replace the value of variable "$file_global" = "new";
I want to use "grunt-sass-replace" package to do the work, i tried alot but its giving me various errors.
My Project Directory Structure:
grep/
/node_modules/
package.json
Gruntfile.js
src/
my-styles.scss
my-styles.scss Code:
$file_global: "old";
Gruntfile.js Code:
module.exports = function(grunt){
pkg: grunt.file.readJSON('package.json'),
grunt.initConfig({
'sass-replace': {
files: { // File Options
src: 'src/my-styles.scss',
dest: 'dest/my-styles.scss'
},
options: {
variables: [
{
name: 'file_global',
to: 'new'
}
]
}
}
});
grunt.loadNpmTasks('grunt-sass-replace');
grunt.registerTask('default', ['sass-replace']);
};
package.json Code:
{
"name": "grep",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "KJ",
"license": "ISC",
"devDependencies": {
"grunt": "^1.0.4",
"grunt-sass-replace": "^0.1.18",
"npm-check-updates": "^3.1.9"
}
}
I updated the "files" but its still giving me various errors.
Below are the options that i tried and the errors generated.
First Try
// Option First :
files: {
'dest/my-styles.scss': 'src/my-styles.scss'
},
ERROR :
C:\wamp64\www\GREP>grunt
>> Tasks directory "C:\wamp64\www\GREP\node_modules\grunt-sass-replace\node_modules\grunt-string-replace\tasks" not found.
Running "sass-replace:files" (sass-replace) task
Warning: no files passed. Use --force to continue..
Aborted due to warnings.
Second Try:
// Option Second :
files: [
{
src: 'src/my-styles.scss',
dest: 'dest/my-styles.scss'
}
],
ERROR :
C:\wamp64\www\GREP>grunt
>> Tasks directory "C:\wamp64\www\GREP\node_modules\grunt-sass-replace\node_modules\grunt-string-replace\tasks" not found.
Running "sass-replace:files" (sass-replace) task
Warning: pattern.indexOf is not a function Use --force to continue.
Aborted due to warnings.
Last Try:
// Option Third :
files: {
src: 'src/my-styles.scss',
dest: 'dest/my-styles.scss'
},
ERROR :
C:\wamp64\www\GREP>grunt
>> Tasks directory "C:\wamp64\www\GREP\node_modules\grunt-sass-replace\node_modules\grunt-string-replace\tasks" not found.
Running "sass-replace:files" (sass-replace) task
>> [1] scss files found in [1] passed files.
>> replacements resolved successfully.
running string-replace task.
Warning: Task "string-replace:sass" not found. Use --force to continue.
Aborted due to warnings.
Anyone know how to solve this error, or any other grunt package which can do this kind of work.
This package was last updated 3 years ago, also it uses grunt ~0.4.5. I can't help you with this, However checkout "grunt-sass-replace-values" from https://www.npmjs.com/package/grunt-sass-replace-values. This package is updated a year ago and patched.
npm install grunt-sass-replace-values --save-dev
Check out following issue on Github:
https://github.com/eliranmal/grunt-sass-replace/issues/1
Explanation :
Cause of errors :
You defined sass variable incorrectly. Variables should be defined as "$variable: value;" and not like "$variable = value;"
As of the Github issue with this package, you need to update the path to your "grunt-string-replace" dependency.
Solution :
Under your project root folder, Go to below directory:
node_modules/grunt-sass-replace/tasks
Once you're in the above directory, look for a file name "sass-replace.js"
Just open the file with any Text Editor, and Edit the path to dependency.
grunt.task.loadTasks(path.resolve(__dirname, '../node_modules/grunt-string-replace/tasks'));
In your case edit this like as below :
grunt.task.loadTasks(path.resolve(__dirname, '../../../node_modules/grunt-string-replace/tasks'));
I hope this solves your problem. If not use another package, or use older node and grunt(0.4.5) versions.
My Grunt file:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
ts: {
dev: {
src: ["src/background/*.ts"],
out: ["build/background.js"],
}
}
});
grunt.loadNpmTasks("grunt-ts");
grunt.registerTask("default", ["ts:dev"]);
};
(I am using grunt-ts.)
System info
Windows 8.1
NodeJS v0.10.24
grunt-cli v0.1.11
grunt v0.4.2
I've already searched the Internet and found many resources about this error, but they all say that one should upgrade NodeJS and/or Grunt. I've already tried that. I had even completely re-installed Grunt, however, the error remained.
The complete error message:
P:\my-folder>grunt ts
Running "ts:dev" (ts) task
Warning: Arguments to path.resolve must be strings Use --force to continue
Aborted due to warnings.
package.json
{
"name": "regex-search",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-nodeunit": "~0.2.0",
"grunt-contrib-uglify": "~0.2.2",
"grunt-ts": "~1.5.1"
}
}
After comparing my Gruntfile with the officially provided sample file, I found my really silly mistake:
ts: {
dev: {
src: ["src/background/*.ts"],
out: ["build/background.js"],
}
}
out must not be an array!
The correct version:
ts: {
dev: {
src: ["src/background/*.ts"],
out: "build/background.js",
}
}
So in my particular case, a node module's main attribute in package.json was an array and not a string, example in history.js' package.json:
{
"main": [ './history.js', './history.adapter.ender.js' ]
}
The way I found this out was going to where the error originated in my node_modules and then did console.log(pkg.main) right above it.
Original stacktrace:
Fatal error: Arguments to path.resolve must be strings
TypeError: Arguments to path.resolve must be strings
at Object.posix.resolve (path.js:422:13)
at /Users/ebower/work/renvy/node_modules/browserify/node_modules/resolve/lib/async.js:153:38
at fs.js:336:14
at /Users/ebower/work/renvy/node_modules/grunt-browserify/node_modules/watchify/node_modules/chokidar/node_modules/readdirp/node_modules/graceful-fs/graceful-fs.js:104:5
at /Users/ebower/work/renvy/node_modules/grunt-mocha/node_modules/mocha/node_modules/glob/node_modules/graceful-fs/graceful-fs.js:104:5
at FSReqWrap.oncomplete (fs.js:99:15)