I have just configured eslint and prettier in my project and set up a rule for max len. But it is not working as expected. I wanted to break the line when the it exceeds 120 characters. It does break the line but only when the character length is more than 135 characters.
Preview:
My config files:
eslintrc
"extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"],
"plugins": ["import", "react", "prettier"],
"rules": {
"react/jsx-uses-react": 2,
"react/react-in-jsx-scope": "off",
"prettier/prettier": "error",
"camelcase": "off",
"import/prefer-default-export": "off",
"react/prop-types": "off",
"react/jsx-filename-extension": "off",
"react/jsx-props-no-spreading": "off",
"react/no-unused-prop-types": "off",
"react/require-default-props": "off",
"quotes": "off",
"no-unused-vars": "warn",
"no-console": "warn",
"max-len": ["error", { "code": 120, "ignoreUrls": true, "ignoreRegExpLiterals": true }]
}
prettierrc
{
"trailingComma": "all",
"singleQuote": true,
"tabWidth": 2,
"printWidth": 120,
"proseWrap": "preserve",
"useTabs": true,
"bracketSpacing": true,
"arrowParens": "always",
"endOfLine": "auto"
}
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 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
}
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"}],
....
}
Can some one share with me good Eslint configuration for express/mongo API implementation?
Do not satisfied with first 10 google's articles.
This has ESLint, eslint-plugin-node (Additional ESLint's rules for Node.js),eslint-plugin-security (ESLint rules for Node Security) integrated.
You can also integrate prettier.
Airbnb style guide is chosen as it's the most popular.
{
"env": {
"commonjs": true,
"es6": true,
"node": true
},
"extends": [
"airbnb-base",
"plugin:node/recommended",
"plugin:security/recommended"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2020
},
"rules": {
"node/exports-style": ["error", "module.exports"],
"node/file-extension-in-import": ["error", "always"],
"node/prefer-global/buffer": ["error", "always"],
"node/prefer-global/console": ["error", "always"],
"node/prefer-global/process": ["error", "always"],
"node/prefer-global/url-search-params": ["error", "always"],
"node/prefer-global/url": ["error", "always"],
"node/prefer-promises/dns": "error",
"node/prefer-promises/fs": "error"
}
}