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": {}
}