Menu
I am trying setup React typescript's eslint setup where code's max lenght is 80, if the code is more than 80 then it will break the line and codes will go to the next line automatically. But seems like my eslint max-lenght auto-fix does not work. I just go warn and when i click the quick its just disable the entire component. Currently, my code looks this, I have scroll all the way to the right to see all the codes. PS. I delete prettier extension.
This is my .eslintrc.js setup
module.exports = {
parser: "@typescript-eslint/parser",
extends: [
"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended"
],
parserOptions: {
jsx: true,
useJSXTextNode: true
},
plugins: [
'@typescript-eslint',
"react",
"react-hooks"
],
settings: {
react: {
version: "999.999.999" // no latest option, 999.999.999 as a hack
}
},
rules: {
semi: ["warn", "always"],
indent: "off",
"@typescript-eslint/indent": ["warn", 2],
"@typescript-eslint/explicit-function-return-type": 0,
"@typescript-eslint/no-explicit-any": 0,
"@typescript-eslint/interface-name-prefix": 0,
"@typescript-eslint/no-empty-interface": 0,
"react/jsx-uses-vars": 1,
"quotes": "off",
"@typescript-eslint/quotes": ["warn", "backtick", { avoidEscape: true }],
"max-len": ["warn", { code: 80, ignoreComments: true }],
"arrow-parens": ["warn", "always"],
"arrow-spacing": "warn",
"no-var": "warn",
"no-const-assign": "warn",
"no-dupe-class-members": "warn",
"no-duplicate-imports": ["warn", { includeExports: true }],
"prefer-arrow-callback": ["warn", { "allowNamedFunctions": true }],
"prefer-const": "warn",
"react/display-name": ["warn", { "ignoreTranspilerName": true }],
"padding-line-between-statements": [
"warn",
{ blankLine: "always", prev: "function", next: "function" }
],
"prefer-destructuring": [
"warn",
{
array: false,
object: true
},
{
enforceForRenamedProperties: false
}
],
"template-curly-spacing": "warn",
"no-dupe-args": "warn",
"no-dupe-keys": "warn",
"no-duplicate-case": "warn",
"no-empty": "warn",
"no-extra-semi": "warn",
"no-extra-parens": ["warn", "all"],
"no-extra-boolean-cast": "warn",
"no-func-assign": "warn",
"no-inner-declarations": "warn",
"no-irregular-whitespace": "warn",
"no-sparse-arrays": "warn",
"no-unreachable": "warn",
"accessor-pairs": "warn",
"block-scoped-var": "warn",
curly: "warn",
"default-case": "warn",
"dot-notation": "warn",
eqeqeq: "warn",
"guard-for-in": "warn",
"no-empty-pattern": "warn",
"no-multi-spaces": ["warn", { ignoreEOLComments: true }],
"no-new": "warn",
"no-new-func": "warn",
"array-bracket-newline": ["warn", { multiline: true }],
"array-bracket-spacing": ["warn", "never"],
"block-spacing": "warn",
"brace-style": ["warn", "1tbs", { allowSingleLine: true }],
camelcase: "warn",
"comma-dangle": [
"warn",
{
arrays: "never",
objects: "never",
imports: "never",
exports: "never",
functions: "never"
}
],
"comma-spacing": ["warn", { before: false, after: true }],
"comma-style": ["warn", "last"],
"computed-property-spacing": ["warn", "never"],
"eol-last": ["warn", "always"],
"func-call-spacing": ["warn", "never"],
"func-names": ["warn", "always", { "generators": "as-needed" }],
"func-style": ["warn", "expression", { allowArrowFunctions: true }],
"jsx-quotes": ["warn", "prefer-double"],
"key-spacing": ["warn", { beforeColon: false }],
"keyword-spacing": ["warn", { before: true }],
"lines-around-comment": ["warn", { beforeBlockComment: false }],
"no-array-constructor": "warn",
"no-lonely-if": "warn",
"no-multiple-empty-lines": ["warn", { max: 1, maxEOF: 1 }],
"no-multi-assign": "warn",
"no-trailing-spaces": "warn",
"no-unneeded-ternary": "warn",
"no-whitespace-before-property": "warn",
"object-curly-spacing": ["warn", "always"],
"object-property-newline": ["warn", { allowAllPropertiesOnSameLine: true }],
"padded-blocks": ["warn", "never"],
"quote-props": ["warn", "always"],
"semi-spacing": ["warn", { before: false, after: true }],
"semi-style": ["warn", "last"],
"sort-vars": ["warn", { ignoreCase: true }],
"space-before-blocks": ["warn", "always"],
"space-before-function-paren": ["warn", {
"anonymous": "never",
"named": "never",
"asyncArrow": "always"
}],
"space-in-parens": ["warn", "never"],
"spaced-comment": ["warn", "always"],
"switch-colon-spacing": "warn",
"@typescript-eslint/explicit-member-accessibility": "warn",
"no-empty-function": "off",
"@typescript-eslint/no-empty-function": ["error", { "allow": ["arrowFunctions"] }],
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn"
}
};
** This is my .vscode/settings.json **
{
"editor.cursorBlinking": "blink",
"editor.cursorStyle": "line",
"editor.detectIndentation": false,
"editor.fontFamily": "'Operator Mono', 'SF Mono', Menlo, Operator Mono, Monaco, 'Courier New', monospace",
"editor.fontLigatures": true,
"editor.fontSize": 14,
"editor.fontWeight": "500",
"editor.insertSpaces": true,
"editor.letterSpacing": 0,
"editor.lineHeight": 28,
"editor.lineNumbers": "on",
"editor.minimap.enabled": true,
"editor.quickSuggestions": {
"comments": false,
"other": true,
"strings": false
},
"editor.quickSuggestionsDelay": 10,
"editor.renderControlCharacters": true,
"editor.renderIndentGuides": true,
"editor.renderWhitespace": "all",
"editor.rulers": [
90,
100
],
"editor.snippetSuggestions": "top",
"editor.tabCompletion": "on",
"editor.tabSize": 2,
"editor.trimAutoWhitespace": true,
"files.autoGuessEncoding": true,
"files.autoSave": "onFocusChange",
"files.defaultLanguage": "html",
"files.exclude": {
"**/*.pyc": true,
"**/package-lock.json": true,
"**/styles/css/": true,
"**/.DS_Store": true,
"**/.git": true,
"**/.hg": true,
"**/.svn": true,
"**/CVS": true,
"**/distribution/": true,
"**/dist/": true,
"**/libraries/": true,
"**/lib/": true,
"**/node_modules/": true,
"**/build/": true,
},
"files.insertFinalNewline": true,
"files.trimTrailingWhitespace": true,
"window.zoomLevel": 0,
"workbench.iconTheme": "vs-seti",
"workbench.sideBar.location": "left",
"editor.dragAndDrop": false,
"extensions.ignoreRecommendations": true,
"files.associations": {
"*.vue": "html",
"Vagrantfile": "ruby",
"*.js": "javascript"
},
"python.linting.pylintEnabled": false,
"python.linting.lintOnSave": false,
"python.linting.pycodestyleEnabled": false,
"python.linting.flake8Enabled": true,
"python.linting.flake8Args": [
"--max-line-length=100",
],
"python.linting.pycodestyleArgs": [
"--ignore=E501"
],
"[plaintext]": {},
"[javascript]": {
"editor.formatOnSave": true,
},
"[typescriptreact]": {
"editor.formatOnSave": true,
},
"[typescript]": {
"editor.formatOnSave": true
},
"javascript.updateImportsOnFileMove.enabled": "never",
"breadcrumbs.enabled": true,
"[python]": {
"editor.tabSize": 4,
},
"typescript.validate.enable": false,
"javascript.validate.enable": false,
"docthis.includeDescriptionTag": true,
"docthis.inferTypesFromNames": true,
"merge-conflict.autoNavigateNextConflict.enabled": true,
"typescript.updateImportsOnFileMove.enabled": "always",
"explorer.confirmDelete": false,
"typescript.surveys.enabled": false,
"eslint.validate": [
{ "language": "javascript", "autoFix": true },
{ "language": "javascriptreact", "autoFix": true },
{ "language": "typescript", "autoFix": true },
{ "language": "typescriptreact", "autoFix": true }
],
"eslint.alwaysShowStatus": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"workbench.colorTheme": "Night Owl",
"workbench.statusBar.visible": true,
"eslint.codeAction.disableRuleComment": {},
"eslint.codeAction.showDocumentation": {}
}
679
ESLint is a JavaScript linter that you can use to lint either TypeScript or JavaScript code.
To temporarily turn off ESLint, you should add a block comment /* eslint-disable */ before the lines that you're interested in: /* eslint-disable */ console. log('JavaScript debug log'); console. log('eslint is disabled now');
ESLint comes with a large number of built-in rules and you can add more rules through plugins. You can modify which rules your project uses either using configuration comments or configuration files. To change a rule setting, you must set the rule ID equal to one of these values: "off" or 0 - turn the rule off.
Keep in mind that we have over 200 rules, and that is daunting both for end users and the ESLint team (who has to maintain them). As such, any new rules must be deemed of high importance to be considered for inclusion in ESLint.
There have been a couple of issues that are opened, about adding auto-fix for the max-len rule, but unfortunately, the eslint team doesn't seem willing to pursue it (the reasons are stated on the thread).
You can consider disabling that rule for the particular line:
// eslint-disable-next-line max-len
If you are looking for an auto-fix solution, I would recommend you to re-install prettier.
175
NOTE: The below answer does not exactly address the question. The question is about eslint specifically, and this solution is for prettier, a different formatting library that can work alongside eslint.
In my case I had an error in my eslintrc.json (an extra comma in the end) and so no lint configuration was being picked up.
Fixing that solved my problem.
Also, make sure you're using prettier as a dependency and NOT as an extension on VScode.
prettier.config.json
module.exports = {
singleQuote: true,
trailingComma: 'all',
arrowParens: 'avoid',
printWidth: 80,
bracketSpacing: true,
jsxBracketSameLine: true,
};
.eslintrc.json
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:react/recommended",
"airbnb",
"plugin:prettier/recommended"
],
"parser": "babel-eslint",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": [
"react",
"react-hooks",
"prettier"
],
"rules": {
"prettier/prettier": [
"error",
{
"endOfLine": "auto"
},
{
"usePrettierrc": true
}
],
"import/no-dynamic-require":"off",
"global-require": "off",
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"no-use-before-define": "off",
"react/react-in-jsx-scope": "off",
"import/no-cycle": "off",
"react/prop-types": "off",
"react/jsx-filename-extension": "off",
"import/no-named-as-default": "off",
"import/no-named-as-default-member": "off",
"react/jsx-props-no-spreading": "off",
"no-param-reassign": "off",
"radix": "off",
"import/order": "off",
"no-plusplus": "off",
"no-underscore-dangle": "off",
"no-unused-expressions": "off",
"array-callback-return": "warn",
"react/jsx-no-bind": "off",
"class-methods-use-this": "off",
"consistent-return": "off",
"new-cap": "off",
"react/destructuring-assignment": "off",
"react/forbid-prop-types": "off",
"import/prefer-default-export": "off",
"react/no-unused-state": "warn",
"no-unused-vars": "warn",
"no-nested-ternary": "off",
"jsx-a11y/click-events-have-key-events": "off",
"jsx-a11y/no-static-element-interactions": "off",
"react/sort-comp": "off",
"jsx-a11y/anchor-is-valid": "off",
"no-return-assign": "warn",
"react/no-array-index-key": "warn",
"guard-for-in": "warn",
"no-restricted-syntax": "warn",
"max-classes-per-file": "off",
"react/state-in-constructor": "off",
"react/static-property-placement": "off",
"react/prefer-stateless-function": "off",
"react/no-did-update-set-state": "warn",
"camelcase": "off",
"prefer-destructuring": "warn",
"no-await-in-loop": "warn",
"no-restricted-globals": "off",
"no-bitwise": "off",
"eqeqeq": "warn",
"no-shadow": "warn",
"jsx-a11y/label-has-associated-control": "off",
"react/button-has-type": "off"
}
}
package.json
"devDependencies": {
"babel-eslint": "^10.1.0",
"eslint": "^7.22.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"node-sass": "^4.14.1",
"prettier": "^2.2.1"
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With