This is my first time with eslint so if I have missed any info below please do let me know with the comments. I have a react native project and have configured eslint in it. Here are my rules:
{
"env": {
"browser": true,
"es6": true,
"node": true,
"react-native/react-native": true,
},
"extends": "eslint:recommended",
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react",
"react-native"
],
"rules": {
"quotes": [2, "double", "avoid-escape"],
"semi": [
"error",
"always"
],
"indent": [
"error",
2
],
"linebreak-style": [
"error",
"unix"
],
"react-native/no-unused-styles": 2,
"react-native/split-platform-components": 2,
"react-native/no-inline-styles": 2,
"react-native/no-color-literals": 2,
"react-native/no-raw-text": 2,
"object-curly-spacing": [2, "always", {
"objectsInObjects": true,
"arraysInObjects": true
}]
}
}
As you can see two important rules here about quotes and object-curly-spacing. Even though I have set quotes to double but still when I do yarn lint --fix it gives me warning that
warning Strings must use singlequote
and with the --fix flag it changes to single quotes. What I am doing wrong here please explain.
Similarly with object-curly-spacing set to "always" my imports are changed from having spaces in objects to no space i.e from { test } to {test}.
I want strings in double quotes and spaces after and before object literals.
Related
This is a question similar to Why eslint consider class as variable in naming-convention rule?, but that one is pretty old and I see no consistency in the handling now.
When I statically import a class type then ESLint recognizes it as such and applies the class naming rule, for example:
import { PieGraphLayout } from import("../console.worker-types");
When I do this with a dynamic import, however, I get an error:
const { PieGraphLayout } = await import("../console.worker-types");
leads to:
Variable name PieGraphLayout must match one of the following formats: camelCase eslint#typescript-eslint/naming-convention
I have to suppress this warning, but would like to modify my ESLint rules instead, if possible. My current naming-convention rule is:
"#typescript-eslint/naming-convention": [
"error",
{
"selector": "default",
"format": [
"camelCase"
],
"filter": {
"regex": "^_",
"match": false
}
},
{
"selector": "class",
"format": [
"PascalCase"
]
},
{
"selector": "typeParameter",
"format": [
"PascalCase"
]
},
{
"selector": "enum",
"format": [
"PascalCase"
]
},
{
"selector": "enumMember",
"format": [
"PascalCase"
]
},
{
"selector": "typeAlias",
"format": [
"PascalCase"
]
},
{
"selector": "interface",
"format": [
"PascalCase"
],
"prefix": [
"I"
]
}
],
What needs to be changed so that ESLint no longer gives a warning for such dynamic imports?
You don't have defined formats for variable entities, and ESLint uses your default selector format, which is camelCase in the provided configuration.
To provide formats for a variable, please configure variable selector.
In your case, there should be something like
{
"selector": "variable",
"format": [
"PascalCase"
]
},
Here is a doc for all available selectors.
I have the following syntax:
test: name {
param_name: value
another_param: value2
test: [12, "asd"]
test2: [
"test__",
"test3"
]
}
My logic here is as follows:
Detect scopes as multi-line match
"begin": "([a-z_]+)\\s?:\\s?([a-z_\\+]+)?\\s?(\\{)",
"end": "(\\})",
In the patterns section of the above, add parameters with multiline matching
"begin": "(?!sql)([a-z\\_]*)\\s?:",
"end": "(?<=\\n)",
And then in the patterns of that I have array
"begin": "\\[",
"end": "\\]",
The problem is that test: [12, "asd"] is correctly defined as
test - parameter name
[12, "asd"] - parameter value + array
but I can't get it to work on the multi-line value. It only recognises the opening [ as array.
At first I thought I understood the reason why. The parameters finishes when it sees a new line, hence the second line of an array will not be matched. So I added array to the main scope pattern and that's when my understanding ends.
Full file:
{
"$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
"name": "QQQL",
"patterns": [
{"include": "#scopes"},
{"include": "#parameters"}
],
"repository": {
"scopes": {
"name": "source.qqql.scope",
"begin": "([a-z_]+)\\s?:\\s?([a-z_\\+]+)?\\s?(\\{)",
"end": "(\\})",
"patterns": [
{"include": "#scopes"},
{"include": "#array"},
{"include": "#parameters"}
]
},
"parameters": {
"name": "source.qqql.parameter",
"begin": "(?!sql)([a-z\\_]*)\\s?:",
"end": "(?<=\\n)",
"beginCaptures": {
"1": {
"name": "source.qqql.parameter.name"
}
},
"patterns": [
{"include": "#array"},
{
"name": "source.qqql.parameter.value",
"match": "(.*)",
"captures": {
"1": {
"patterns": [
{"include": "#array"}
]
}
}
}
]
},
"array": {
"name": "source.qqql.array",
"begin": "\\[",
"end": "\\]",
"patterns": [
{"include": "#strings"},
{
"name": "source.qqql.array.delimiter",
"match": "\\,"
}
]
}
},
"scopeName": "source.qqql"
}
What I expected is that the inclusion of array in scopes would solve the problem but somehow it doesn't.
My React Native project already has alias of some folder. They are put in babel.config.js file:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
'plugins': [
[
'module-resolver',
{
'root': [
'.',
],
'alias': {
'assets/*': './src/assets/*',
'images': './src/assets/images',
'navigation': './src/navigation',
'navigation/*': './src/navigation/*',
'screens': './src/screens',
'screens/*': './src/screens/*',
'splash': './src/modules/splash',
'utils': './src/utils',
'utils/*': './src/utils/*',
'translations': './src/utils/translations',
'translations/*': './src/utils/translations/*',
'msg': './src/utils/translations/msg',
'languages': './languages',
'styles': './src/styles',
'styles/*': './src/styles/*',
'components': './src/components',
'constant': './src/constant',
'context': './src/context',
'api': './src/API',
'store': './src/store',
'store/*': './src/store/*',
},
},
],
'react-native-reanimated/plugin',
],
'env': {
'production': {
'plugins': [
'transform-remove-console',
],
},
},
};
But when I import a function using these alias, the intellisense does not work. I also try to create jsonconfig.json follow this document (https://code.visualstudio.com/docs/languages/jsconfig)
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"app/*": ["src/app/*"],
"assets/*": ["src/assets/*"],
"images": ["/src/assets/images"],
"navigation": ["/src/navigation"],
"navigation/*": ["/src/navigation/*"],
"screens": ["/src/screens"],
"screens/*": ["/src/screens/*"],
"splash": ["/src/modules/splash"],
"utils": ["/src/utils"],
"utils/*": ["/src/utils/*"],
"translations": ["/src/utils/translations"],
"translations/*": ["/src/utils/translations/*"],
"msg": ["/src/utils/translations/msg"],
"languages": ["/languages"],
"styles": ["/src/styles"],
"styles/*": ["/src/styles/*"],
"components": ["/src/components"],
"constant": ["/src/constant"],
"context": ["/src/context"],
"api": ["/src/API"],
"store": ["/src/store"],
"store/*": ["/src/store/*"],
}
}
}
but still not working. Anyone can help me to fix the intellisense in VS Code?
I have installed eslint in my machine and i have used visual studio code
i have certain modules and process to be exported
When i try to use "module" or "process" it shows
it was working fine before.
[eslint] 'module' is not defined. (no-undef)
[eslint] 'process' is not defined. (no-undef)
and here is my .eslintrc.json
{
"env": {
"browser": true,
"amd": true
},
"parserOptions": {
"ecmaVersion": 6
},
"extends": "eslint:recommended",
"rules": {
"no-console": "off",
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"windows"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
}
}
I want to remove this error
You are probably trying to run this in node environment.
The env section should look like this:
"env": {
"browser": true,
"amd": true,
"node": true
},
In your ESLint config file, simply add this:
{
...
env: {
node: true
}
...
}
That should fix the "module" is not defined and "process" is not defined error.
That assumes you are running in a Node environment. There is also the browser option for a browser environment. You can apply both based on your need.
If you want to prevent ESLint from linting some globals then you will need to add the specific global variables in the globals section of the config.
globals: {
window: true,
module: true
}
You need to tell eslint that you are in a Node environment. My favourite way to do this for one-off files like gulpfile.js is to include this comment at the top:
/* eslint-env node */
I think you can just rename all your CommonJS config files to have .cjs as their extension and then add this to eslintrc.cjs:
module.exports = {
// ...
env: {
// If you don't want to change this to `node: true` globally
es2022: true,
},
// then add this:
overrides: [
{
files: ['**/*.cjs'],
env: {
node: true,
},
},
],
}
I'm using Webdriver IO as the e2e testing framework. But this autocomplete issue is really slowing me down. VS Code doesn't auto complete the global variable browser and it's methods.
.eslintrc
{
"extends": ["eslint:recommended", "standard"],
"parser": "babel-eslint",
"plugins": [
"mocha",
"webdriverio"
],
"env": {
"webdriverio/wdio": true,
"mocha": true
},
"parserOptions": {
"ecmaVersion": 8,
"sourceType": "module"
},
"rules": {
"indent": ["error", 4]
}
}
.babelrc
{
"presets": ["es2015"],
"plugins": [
["transform-runtime", {
"polyfill": false
}]
]
}
I think you can use TypeScript typings.
Add 2 dependencies to package.json:
"#types/node": "^8.5.2",
"#types/webdriverio": "^4.8.7",
Install them, reload project. If autocomplete does not yet works, create
tsconfig.json in root of your project:
{
"compilerOptions": {
"allowJs": true,
"outDir": "./.built/"
}
}
You don't need to use typescript compiler, it will just provide autocomplete. Continue writing your js code as usual.
But if you wish to use typescript, here is small beginner guide:
http://webdriver.io/guide/getstarted/configuration.html#Setup-TypeScript