I am one of those who prefers to have ternary expressions span multiple lines for readability. However, my current set-up is not fixing it as expected.
eslint v7.17.0
Here is the relevant part of my .eslintrc.js:
rules: {
'multiline-ternary': 'error',
'operator-linebreak': ['error', 'after', { overrides: { '?': 'before', ':': 'before' } }],
},
...
Both rules are fixable according to the docs:
My npm lint script is eslint --fix --ext .js,.vue --ignore-path .gitignore .
However, I'm getting this in my console:
Why is it telling me that it is potentially fixable without fixing it?
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!
I want to disable rule for all files inside nested directory. I found examples only for exact path or by file extension. But it is not what I want.
We use it for shared config and don't know where this directory will be. We have many of them.
I'm trying config like this:
{
overrides: [
{
files: [
'**/test/**/*',
],
rules: {
"import/no-extraneous-dependencies": "off"
}
},
],
}
But glob like **/test/**/* and many others didn't not work.
Can someone help to reach this goal?
The above code should work.
How were you testing this? If it's an extension like VSCode you may need to refresh things to see latest definitions loaded.
If you are using a eslint service like esprint you will also need to restart it to grab latest definitions.
Caching
Make sure that eslint is not configured to cache results to avoid having to cache bust when debugging things. eslint docs
Here's an example for a react-native app with multiple overrides
module.exports = {
...baseConfig,
overrides: [
typescriptOverrides,
e2eOverrides,
themeOverrides,
{
files: ['**/*.style.js'],
rules: {
'sort-keys': [
'error',
'asc',
{
caseSensitive: true,
natural: true,
},
],
},
},
{
files: ['**/*.test.js'],
rules: {
'arrow-body-style': 'off',
},
},
],
};
Debugging the glob matcher
Run eslint in debug mode and see all the files being run example DEBUG=eslint:cli-engine npx eslint src/**/*.test.js
You can test your glob patterns by running a ls command. Example: ls ./src/**/*.test.js will either return all the files or 'no matches found'.
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 have the following lint config...
{
"extends": ["eslint:recommended", "google"],
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module"
},
"rules": {
"require-jsdoc": 1
},
"env": {
"es6": true
}
}
and the following code...
const __dirname = path.dirname(new URL(import.meta.url).pathname);
//^Error is...
But when it lints I get...
9:46 error Parsing error: Unexpected token .
This is a pretty common piece of code so I am confused.
Update
solved with...
"ignorePatterns": ["unclean.mjs", "node_modules"],
But I would like a solution where I don't have to ignore an entire file.
It is a syntax error because the default parser of ESLint only supports stage 4 proposals, but import.meta is currently stage 3. For now, you must change the parser to "babel-eslint" or "#typescript-eslint/parser" in order to parse import.meta.
That phrase is a syntax error because import is a keyword in EcmaScript. Therefore import.meta is as invalid as if.foo or switch.foo.
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.