I am new at work and my colleagues are all on holidays. Before holidays my colleague replaced moment.js for day.js in our project and I started having some sync problems with all those files where the changes took place, they got solved by reinstalling Node.
However, I keep getting these ESLINT/ Prettier errors in both the browser and the terminal. I guess he also made some changes in that configuration. I tried reinstalling ESLINT and it didn't help, then I uninstalled Prettier but the problem persists. I see the problems are related to "," (comas) and spaces. How can I fix this?
error in browser
The .eslintrc file:
{
"env": {
"browser": true,
"es6": true,
"node": true,
"jest": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended",
"plugin:prettier/recommended"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly",
"window": true
},
"parser": "babel-eslint",
"parserOptions": {
"ecmaFeatures": { "jsx": true },
"ecmaVersion": 2020,
"sourceType": "module"
},
"plugins": ["jest"],
"rules": {
"linebreak-style": ["error", "unix"],
"semi": ["error", "always"],
"no-unused-vars": "off",
"react/prop-types": 0,
"react/display-name": ["off"],
"react/no-find-dom-node": ["off"],
"prettier/prettier": ["error", {}, { "usePrettierrc": true }]
},
"settings": { "react": { "version": "detect" } },
"overrides": [
{
"plugins": ["jest"],
"files": ["**/*.ts", "**/*.tsx"],
"env": {
"browser": true,
"es6": true,
"node": true,
"jest": true
},
"extends": [
"eslint:recommended",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended",
"plugin:prettier/recommended"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly",
"window": true
},
"rules": {
"prettier/prettier": ["error", {}, { "usePrettierrc": true }],
"react/prop-types": "off",
"react/display-name": "off",
"#typescript-eslint/no-unused-vars": "warn",
"#typescript-eslint/no-loss-of-precision": "warn",
"no-unsafe-optional-chaining": "warn"
},
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": { "jsx": true },
"ecmaVersion": 2020,
"sourceType": "module",
"project": "./tsconfig.json"
},
"settings": { "react": { "version": "detect" } }
}
]
}
.prettierrc file:
{
"arrowParens": "avoid",
"bracketSpacing": true,
"endOfLine": "lf",
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"jsxBracketSameLine": false,
"jsxSingleQuote": false,
"printWidth": 80,
"proseWrap": "always",
"quoteProps": "as-needed",
"requirePragma": false,
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"useTabs": true
}
Related
I have React app and I want to disable or throw an error when the keyword function is used, I have looked at all the eslint rules doc, but didn't find what I am looking for.
my .eslintrc as follow:
{
"env": {
"browser": true,
"es2021": true,
"jest": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:prettier/recommended"
],
"settings": {
"react": {
"version": "detect"
}
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["react", "prettier"],
"rules": {
"react/react-in-jsx-scope": "off",
"no-unused-vars": "warn",
"no-console": "warn",
"func-names": "warn",
"comma-dangle": 1,
"quotes": "warn",
}
}
I installed StoryBook and Eslint. When building Storybook, Eslint sends an error about imports =>
Line 1:9: ComponentMeta not found in '#storybook/react' import/named
Line 1:24: ComponentStory not found in '#storybook/react' import/named
module.exports = {
"env": {
"browser": true,
"es2021": true
},
"overrides": [
{
"files": ['*.stories.#(ts|tsx|js|jsx|mjs|cjs)'],
"rules": {
'storybook/hierarchy-separator': 'error',
'storybook/default-exports': 'off',
"import/no-extraneous-dependencies": "off",
}
}
],
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx",]
}
},
},
"extends": ["eslint:recommended",
"plugin:react/recommended",
"plugin:#typescript-eslint/recommended",
"plugin:react-hooks/recommended",
"plugin:import/recommended",
"plugin:storybook/recommended",
"prettier"
],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": ["react", "#typescript-eslint"],
"rules": {
"react/prop-types": "off",
"react/react-in-jsx-scope": "off",
'react/jsx-filename-extension': [2, {
'extensions': ['.js', '.jsx', '.ts', '.tsx']
}],
"#typescript-eslint/no-explicit-any": ["off"],
"#typescript-eslint/no-unused-vars": "off",
"react/no-unescaped-entities": 0,
}
};
I'd like to change my ESLint rules to set the option "properties" value to "never" on the "camelcase" rule. I've read the docs two or three times but didn't quite understand how one does that. Camelcase rule docs
This is my current .eslintrc.json:
{
"env": {
"es2021": true,
"node": true
},
"extends": ["airbnb-base", "plugin:import/typescript"],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["#typescript-eslint"],
"rules": {
"camelcase": ["error"],
"linebreak-style": "off",
"comma-dangle": "off",
"implicit-arrow-linebreak": "off",
"import/extensions": [
"error",
"ignorePackages",
{
"ts": "never"
}
]
}
}
You can do it this way.
"rules": {
"camelcase": ["error", {"properties": "never"}],
....
}
How I can get a warning instead of an error while using ESLint?
I use ESLint 6.7.2 version with a plugin for babel and react.
This is my actual .eslintrc.json:
{
"env": {
"browser": true,
"es6": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
},
"settings": {
"react" : {
"version": "16.7.0"
}
},
"parser": "babel-eslint"
}
I've found the answer:
It enough to add a rule for no-unused-vars:
"rules": {
"no-unused-vars": "warn"
},
Also, restart the server.
I am trying to get my eslint-plugins-css-modules plugin too work.
I am new too linting in general and may not have set this up correctly.
The exact error I get is about:
Parsing error: Unexpected token
The error is at the ':'
I have a scss file as follows:
:local(.onlineUsersWidget) {
height: 100%;
}
And an eslintrc like this:
{
"env": {
"browser": true,
"es6": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:jest/recommended",
"plugin:css-modules/recommended"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parser": "babel-eslint",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react",
"css-modules"
],
"rules": {
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"windows"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
},
"overrides": [
{
"files": ["*test.js"],
"rules": {
"react/display-name": 0
}
}
]
}