I'm new to eslint and it's spewing out a ton of errors telling me to use doublequotes:
error Strings must use doublequote
That's not my preference. I've got an .eslintrc file set up with the basics:
{
"env": {
"node": 1
}
}
I'd like to configure it for single quotes.
http://eslint.org/docs/rules/quotes.html
{
"env": {
"node": 1
},
"rules": {
"quotes": [2, "single", { "avoidEscape": true }]
}
}
If you're using TypeScript/ES6 you might want to include template literals (backticks). This rule prefers single quotes, and allows template literals.
TypeScript Examples
"#typescript-eslint/quotes": [
"error",
"single",
{
"allowTemplateLiterals": true
}
]
Another useful option is to allow single or double quotes as long as the string contains an escapable quote like "lorem ipsum 'donor' eta" or 'lorem ipsum "donor" eta'.
"#typescript-eslint/quotes": [
"error",
"single",
{
"avoidEscape": true,
"allowTemplateLiterals": true
}
]
References:
ESLint
https://eslint.org/docs/rules/quotes
TypeScript ESLint
https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/quotes.md
rules: {
'prettier/prettier': [
'warn',
{
singleQuote: true,
semi: true,
}
],
},
In version "eslint": "^7.21.0"
For jsx strings, if you would like to set this rule for all files, create the rule in the eslint config file.
rules: {
'jsx-quotes': [2, 'prefer-single'],
}
Or 'prefer-double' for double quotes.
If you also want to allow double quotes if they would avoid escaping a single quote inside the string, and allow template literals (the reasonable defaults, imo) try the following:
{
"env": {
"node": 1
},
"rules": {
"quotes": [2, "single", { "avoidEscape": true, "allowTemplateLiterals": true }]
}
}
Related
How do you turn off an eslint rule, for example no-inferrable-types which comes from the extension "eslint:recommended"?
For example if my .eslintrc.json contains:
"extends": [
"eslint:recommended",
.....
"#typescript-eslint/no-inferrable-types": [
"error",
{
"ignoreParameters": false,
"ignoreProperties": false
}
],
Set the value to "off" , as described here:
https://eslint.org/docs/latest/user-guide/configuring/rules
For example:
"#typescript-eslint/no-inferrable-types": "off",
I need to use only signleQuote and backTick in the eslint .
These are my codes in the json file :
"rulse":{
"quotes": "error",
"jsx-quotes": [2, "prefer-single"]
}
There is a misspelling and you must tell eslint what quotes to use:
"rules": {
"quotes": ["error", "single", "avoid-escape"]
}
I am using ESLint with the prettier plugin and configuration:
// eslintrc.js
extends: [
`eslint:recommended`,
`plugin:react/recommended`,
`plugin:#typescript-eslint/recommended`,
`plugin:prettier/recommended`,
`prettier/react`,
`prettier/#typescript-eslint`
]
This works great, but I would like to disable a certain prettier rule, which is removing "unneeded" parentheses (removing them actually breaks my code):
// Replace `(state.counter)` with `state.counter` eslint(prettier/prettier)
return <div>{(state.counter)}</div>
As you can see from the message above, it doesn't state which rule exactly is causing this behavior and therefore I don't know which one to override.
I have tried to override all rules found in eslint-prettier-config, but nothing worked and I don't want to keep using // eslint-disable-next-line prettier/prettier.
Prettier is not so configurable. You can try configuration they have: https://prettier.io/docs/en/configuration.html
Put .prettierrc file, or eslint config like this:
{
rules: {
'prettier/prettier': [
'error',
{
trailingComma: 'all',
tabWidth: 2,
semi: false,
singleQuote: true,
bracketSpacing: true,
eslintIntegration: true,
printWidth: 120,
},
],
}
}
It is not currently possible to disable that specific rule from prettier through configuration, but to override rules in eslint that come from the extends block, you can either write in the rule like this:
"rules": {
"prettier/prettier": "off"
"#typescript-eslint/no-use-before-define": [
"error",
{ "functions": false, "variables": true, "classes": true },
],
}
Or to only override it for a specific file pattern you can override it in the overrides block.
"overrides": [
{
"files": ["*.html"],
"rules": {
"prettier/prettier": "off",
"#typescript-eslint/unbound-method": "off"
}
}
]
Here I am showing both the config you were looking for, and an inherited rule from a nested package to show future visitors how to do it.
I'm trying to turn off lint warning for my eslint at VS code.
My code is contains.
console.log('blabla..');
eslint said as below.
error Unexpected console statement no-console
Even though already add no-restricted-syntax at my .eslintrc.json, no fixed.
Here is my .eslintrc.json
{
"env": {
"es6": true,
"node": true,
"amd": true,
"mocha": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 2017,
"sourceType": "module"
},
"rules": {
"linebreak-style": [
"error",
"windows"
],
"no-restricted-syntax": [
"error",
{
"selector": "CallExpression[callee.object.name='console'][callee.property.name=/^(log|warn|error|info|trace)$/]",
"message": "Unexpected property on console object was called"
}
]
}
}
What did I mistake?
Allowing the console.log to stay in code is requiring a separate rule.
You need to add 'no-console' statement to your eslint config rules.
Like so:
rules: {
"no-console": 0
}
A better practice is to warn you about all the console.log in your code, like so:
rules: {
"no-console": 1
}
I followed the advice of Elad and went into the package.json to add the rule of "no-console": 0 and at first it didn't seem like it worked but this is because I needed to restart the development server. If it seems like it's not working, make sure you restart the development server because if you change anything in the package-json, you have to restart your server.
You can add // eslint-disable-line if you need to ignore a specific (or multiple) line
I have a GitHub project that has passed Travis CI. Upon creating a pull request for a new feature, Travis CI fails both pr and push due to two eslint errors:
/home/travis/build/enove/Thriver/packages/thriver-accounts/lib/accounts.js
121:5 error Strings must use singlequote quotes
122:5 error Strings must use singlequote quotes
Lines 119 through 122 of accounts.js are as follows:
119: return `Hello ${user.profile.firstname}!\n\n` +
120: `To verify your account email, simply click the link below.\n\n${url}\n\n` +
121: `If you weren't expecting this email, simply delete it.\n\n` +
122: `Thanks!\n\nAll of us at WCASA`;
The commit did not even change accounts.js, and a local eslint passes without error. I checked and verified that the versions of node, npm, and meteor are the same locally as they are in Travis CI.
The Travis CI configuration is as follows:
{
"sudo": "required",
"language": "node_js",
"node_js": "4.1.1",
"before_install": [
"curl -L https://git.io/ejPSng | /bin/sh"
],
"env": "CXX=g++-4.8",
"addons": {
"apt": {
"sources": [
"ubuntu-toolchain-r-test"
],
"packages": [
"g++-4.8"
]
}
},
"services": "mongodb",
"script": [
"meteor npm run lint"
],
"group": "stable",
"dist": "precise",
"os": "linux"
}
The .eslintrc is as follows:
{
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 6,
"ecmaFeatures": {
"impliedStrict": true
}
},
"env": {
"browser": true,
"node": true,
"mongo": true,
"meteor": true
},
"extends": [
"airbnb"
//"plugin:meteor/recommended"
],
"globals": {
"Thriver": true,
"SimpleSchema": true,
"Marked": true,
"SHA256": true,
"google": true,
"geoXML3": true,
"AutoForm": true,
"details_shim": true
},
"rules": {
"no-underscore-dangle": 0,
"new-cap": 0
}
}
This has happened before in a different file and I "resolved" the issue by having eslint ignore the line. But I can't do that for every mystery issue. Any advice?
http://eslint.org/docs/rules/quotes
This is most likely the fix to your problem.
JavaScript allows you to define strings in one of three ways: double quotes, single quotes, and backticks (as of ECMAScript 6). For example:
/*eslint-env es6*/
var double = "double";
var single = 'single';
var backtick = `backtick`; // ES6 only
The choice of how to define strings in a codebase is a stylistic one outside of template literals (which allow embedded of expressions to be interpreted). Many codebases require strings to be defined in a consistent manner.
I would try setting one of these rules and running the tests again.
Let me know if this does not fix your problem!
I still have no idea how eslint was passing locally. Perhaps I was behind in eslint or airbnb version. However, I realized that the lines really did need to be corrected. The bottom two lines of code should not use back ticks because there aren't any variables in those strings.
119: return `Hello ${user.profile.firstname}!\n\n` +
120: `To verify your account email, simply click the link below.\n\n${url}\n\n` +
121: 'If you weren\'t expecting this email, simply delete it.\n\n' +
122: 'Thanks!\n\nAll of us at WCASA';
Eslint is a lot happier with a concatenated string of different styles than a consistent one where not every segment contains a variable.