ESlint how force declaration new line ? make illegal inline declaration? - eslint

How force declaration to be on new line ?
How to make this illegal?
function foo() {
if ( 'error' ) {
return 'It failed';
}if ( 'loading' ) {// if need to be on new line
return "It's still loading";
}
}
and force this pattern
function foo() {
if ( 'error' ) {
return 'It failed';
}
if ( 'loading' ) {
return "It's still loading";
}
}
my current rule
"rules": {
"brace-style":["warn", "1tbs"],
"array-bracket-newline": ["warn", { "multiline": true }],
"comma-spacing": ["warn", { "before": true, "after": true }],
"curly": [2],
"array-bracket-spacing": ["warn","always"],
"object-curly-spacing": ["warn", "always"],
"object-curly-newline": ["warn", {
"ObjectExpression": { "consistent": true, "multiline": true ,"minProperties": 4},
"ObjectPattern": { "consistent": true, "multiline": true },
"ImportDeclaration": "never",
"ExportDeclaration": { "multiline": true, "minProperties": 3 }
}],
"computed-property-spacing": ["warn", "never", { "enforceForClassMembers": true }],
"space-in-parens": ["warn", "always"],
"padding-line-between-statements": [
"warn",
{ "blankLine": "always", "prev": ["const", "let", "var"], "next": "*"},
{ "blankLine": "any", "prev": ["const", "let", "var"], "next": ["const", "let", "var"]}
],
"sort-imports": ["warn",{
"ignoreCase": false,
"ignoreDeclarationSort": true,
"ignoreMemberSort": false,
"memberSyntaxSortOrder": ["none", "all", "multiple", "single"],
"allowSeparatedGroups": false
}],
"operator-linebreak": ["warn", "none"],
"no-mixed-spaces-and-tabs": "warn",
"object-property-newline": ["warn",{ "allowAllPropertiesOnSameLine": true }],
"no-multiple-empty-lines": ["warn", { "max": 1, "maxEOF": 4 }],
"lines-between-class-members": ["warn", "always"],
"no-multi-spaces": "warn",
"comma-dangle": ["warn", "always-multiline"],
"padded-blocks": ["warn", { "classes": "always","blocks": "never" }, { "allowSingleLineBlocks": true }],
"comma-style": ["warn", "last"],
"arrow-parens": ["warn", "always"],
"indent": ["warn", "tab"],
"no-console": "warn",
"no-return-assign": "warn",
"no-var": "warn",
"no-duplicate-imports": "error",
"react/prop-types": [
0,
{}
],
"react/jsx-curly-brace-presence": "warn",
"space-infix-ops": "warn",
"spaced-comment": ["warn", "always"],
"space-unary-ops": "warn",
"no-else-return": ["error", {"allowElseIf": false}],
//style "vudge"
"grouped-accessor-pairs": ["warn", "getBeforeSet"]
}
Is there a way to prevent this ?

padding-line-between-statements will do what you want, you just have to configure it appropriately.
https://eslint.org/docs/rules/padding-line-between-statements
currently you only have it configured to enforce there are lines in relation to variable declarations - but you've indicated you want to enforce around ifs as well - so you'll want to add config for "block-like" as well.
Here's an example of it working with a really lazy config using "*"
https://eslint.org/demo#eyJ0ZXh0IjoiLypcbmVzbGludCBwYWRkaW5nLWxpbmUtYmV0d2Vlbi1zdGF0ZW1lbnRzOiBbXG4gICdlcnJvcicsXG4gIHsgXCJibGFua0xpbmVcIjogXCJhbHdheXNcIiwgXCJwcmV2XCI6IFwiKlwiLCBcIm5leHRcIjogXCIqXCIgfVxuXVxuKi9cblxuZnVuY3Rpb24gZm9vKCkge1xuICAgIGlmICggJ2Vycm9yJyApIHtcbiAgICAgICAgcmV0dXJuICdJdCBmYWlsZWQnO1xuICAgIH1pZiAoICdsb2FkaW5nJyApIHsvLyBpZiBuZWVkIHRvIGJlIG9uIG5ldyBsaW5lXG4gICAgICAgIHJldHVybiBcIkl0J3Mgc3RpbGwgbG9hZGluZ1wiO1xuICAgIH1cbn1cbiIsIm9wdGlvbnMiOnsicGFyc2VyT3B0aW9ucyI6eyJlY21hVmVyc2lvbiI6MTIsInNvdXJjZVR5cGUiOiJzY3JpcHQiLCJlY21hRmVhdHVyZXMiOnsianN4Ijp0cnVlfX0sInJ1bGVzIjp7fSwiZW52Ijp7fX19

Related

Eslint Failed to load plugin 'security' declared in '.eslintrc': Cannot find module 'eslint-plugin-security'

My eslint don't work, and I don't know why.
Here is my eslint file:
{
"parser": "babel-eslint",
"plugins": [
"security",
"react",
"import",
"material-ui",
"eslint-plugin-no-inline-styles"
],
"extends": [
"airbnb",
"plugin:security/recommended",
"plugin:import/react",
"plugin:import/recommended"
],
"env": {
"browser": true,
"node": true,
"mocha": true
},
"rules": {
"jsx-a11y/media-has-caption": 0,
"import/no-extraneous-dependencies": 0,
"security/detect-object-injection": 0,
"security/detect-child-process": 0,
"security/detect-non-literal-regexp": 0,
"react/jsx-props-no-spreading": 0,
"react/jsx-filename-extension": 0,
"react/jsx-indent": 0,
"react/jsx-indent-props": 0,
"no-tabs": 0,
"indent": 0,
"no-underscore-dangle": 0,
"max-len": 0,
"jsx-quotes": 0,
"react/sort-comp": 0,
"no-debugger": 0,
"import/prefer-default-export": 0,
"arrow-body-style": 0,
"react/jsx-wrap-multilines": 0,
"spaced-comment": 0,
"class-methods-use-this": 0,
"padded-blocks": 0,
"eol-last": 0,
"no-lone-blocks": 0,
"implicit-arrow-linebreak": 0,
"no-plusplus": 0,
"default-case": 0,
"radix": 0,
"arrow-parens": [
"error",
"always"
],
"no-restricted-imports": [
"error",
{
"patterns": [
"#material-ui/*/*/*",
"!#material-ui/core/test-utils/*"
]
}
],
"react/destructuring-assignment": [
0,
"never",
{
"ignoreClassFields": true
}
],
"react/jsx-no-duplicate-props": [
2,
{
"ignoreCase": false
}
],
"no-inline-styles/no-inline-styles": 2
},
"settings": {
"import/resolver": {
"webpack": {
"extensions": [
".js",
".jsx"
]
}
},
"import/extensions": [
".js",
".jsx"
]
}
}
For some reason I get the following error:
Failed to load plugin 'security' declared in '.eslintrc': Cannot find module 'eslint-plugin-security'
I tried to install eslint-plugin-security globally but it didn't solve the issue.
Any Help?
Thanks.
adding "eslint-plugin-security" as a dev dependancy fixed my issue.
yarn add eslint-plugin-security --dev
or
npm install eslint-plugin-security --save-dev
will work
Solved it by changing the eslint file to the following:
{
"parser": "babel-eslint",
"plugins": [
"security",
"react",
"import",
"material-ui",
"eslint-plugin-no-inline-styles"
],
"extends": [
"airbnb",
"plugin:security/recommended",
"plugin:import/react",
"plugin:import/recommended"
],
"env": {
"browser": true,
"node": true,
"mocha": true
},
"rules": {
"jsx-a11y/media-has-caption": 0,
"import/no-extraneous-dependencies": 0,
"security/detect-object-injection": 0,
"security/detect-child-process": 0,
"security/detect-non-literal-regexp": 0,
"react/jsx-props-no-spreading": 0,
"arrow-parens": ["error", "always"],
"no-restricted-imports": [
"error",
{
"patterns": ["#material-ui/*/*/*", "!#material-ui/core/test-utils/*"]
}
],
"react/destructuring-assignment": [2, "never", { "ignoreClassFields": true }],
"react/jsx-no-duplicate-props": [2, { "ignoreCase": false }],
"no-inline-styles/no-inline-styles": 2,
"react/jsx-key": [2, { "checkFragmentShorthand": true }],
"react/no-unsafe": [2, { "checkAliases": true }]
},
"settings": {
"import/resolver": {
"webpack": {
"extensions": [
".js",
".jsx"
]
}
},
"import/extensions": [
".js",
".jsx"
]
}
}

ESLINT: ESLINT Error: ESLint configuration in ..\..\..\..\.eslintrc is invalid: - Unexpected top-level property "import/extensions"

im using airbnb-eslint along with babel-plugin-module-resolver. I get this error in every js file where i've used an alias to import.
{
"extends": ["plugin:import/errors", "plugin:import/warnings", "airbnb", "airbnb/hooks", "prettier", "plugin:prettier/recommended", "prettier/react", "plugin:react/recommended"],
"plugins": ["import", "react", "jsx-a11y", "react-hooks", "babel", "module-resolver"],
"rules": {
"react/jsx-filename-extension": [
2,
{
"extensions": [".js", ".jsx"]
}
],
"react/prop-types": 0,
"implicit-arrow-linebreak": 0,
"prefer-destructuring": 1,
"react/no-unused-state": 1,
"react/destructuring-assignment": 1,
"react/no-array-index-key": 1,
"react/jsx-key": [2],
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"react/jsx-no-duplicate-props": [2],
"react/jsx-uses-vars": [2],
"react/jsx-uses-react": [2],
"react/jsx-no-undef": ["error", { "allowGlobals": true}],
"react/no-direct-mutation-state": [2],
"react/require-optimization": [1],
"react/require-render-return": [2],
"jsx-a11y/img-has-alt": [0],
"jsx-a11y/img-redundant-alt": [2],
"no-nested-ternary": "off",
"no-plusplus": ["error", { "allowForLoopAfterthoughts": true }],
"no-underscore-dangle": ["error", { "allowAfterThis": true }],
"no-unused-expressions": ["error", {
"allowShortCircuit": true,
"allowTernary": true,
"allowTaggedTemplates": true
}],
"no-use-before-define": [
"error",
{ "functions": true, "classes": true, "variables": false }
],
"import/imports-first": ["error", "absolute-first"],
"import/no-unresolved": 0,
"import/newline-after-import": "error",
"import/prefer-default-export": 0,
"import/no-cycle": [2, { "maxDepth": 1, "ignoreExternal": true }],
"import/no-absolute-path": [2, { "esmodule": false, "commonjs": false, "amd": false }],
"prettier/prettier": ["error", {}, {
"usePrettierrc": true
}],
"quotes": [
"error",
"single",
{ "avoidEscape": true, "allowTemplateLiterals": false }
],
"max-len": ["error", {"code": 205, "ignoreUrls": true}],
"no-tabs": ["error", {"allowIndentationTabs": true}],
"babel/arrow-parens": [0, "as-needed"],
"babel/no-unused-expressions": 1,
"babel/valid-typeof": 1,
"module-resolver/use-alias": 2
},
"globals": {
"window": true,
"document": true,
"localStorage": true,
"FormData": true,
"FileReader": true,
"Blob": true,
"navigator": true
},
"env": {
"es2020": true,
"node": true,
"browser": true
},
"settings": {
"react": {
"version": "16.13.1"
},
"import/resolver": {
"babel-module": {
"root": ["."],
"alias": {
"#assets": "./src/assets",
"#config": "./src/config",
"#constants": "./src/constants",
"#hooks": "./src/hooks",
"#sharedComponents": "./src/sharedComponents",
"#commonActions": "./src/app/CommonActions",
"#pages":"./src/app/Pages",
"#utils": "./src/utils"
}
},
"node": {
"root": ["."],
"extensions": [
".js",
".jsx"
]
}
}
},
"parser": "babel-eslint",
"parserOptions": {
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"modules": true
}
}
}
This error does not come when using on mac..... only when using Linux/Windows. Due to this error eslint stops working in VSCode.
Error: ESLINT Error: ESLint configuration in .........eslintrc is invalid: - Unexpected top-level property "import/extensions".
Try adding root: true, as this will stop eslint looking for Global configs outside of your project

object-curly-spacing when the property is on it's own line

My indent settings is 4 spaces, but as you can see in my screenshot, this snippet is auto-fixing to 2 spaces, then eslint is throwing the error.
here is the code behind the error
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
Vue.use(Vuex)
export default new Vuex.Store({
state,
mutations,
actions
})
I'm assuming object-curly-spacing is the culprit but I really don't know eslint very well.
my eslint config
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint",
"ecmaFeatures": {
"legacyDecorators": true
}
},
"rules": {
"no-undef": "warn",
"no-unused-vars": "warn",
"comma-spacing": [
"error",
{
"after": true
}
],
"id-length": [
"warn",
{
"min": 2,
"exceptions": [
"i",
"x",
"y"
]
}
],
"indent": [
"error",
4,
{
"SwitchCase": 1
}
],
"semi": [
"error",
"never"
],
"keyword-spacing": [
"error",
{
"after": true,
"before": true
}
],
"no-multiple-empty-lines": [
"error",
{
"max": 1
}
],
"no-prototype-builtins": "off",
"no-trailing-spaces": [
"error"
],
"object-curly-spacing": [
"error",
"always"
],
"space-in-parens": [
"error",
"never"
],
"quotes": [
"error",
"single"
],
"space-before-function-paren": [
"error",
"never"
],
"vue/attribute-hyphenation": "off",
"vue/attributes-order": "off",
"vue/html-indent": [
"error",
4
],
"vue/max-attributes-per-line": "off",
"vue/multiline-html-element-content-newline": [
"error",
{
"allowEmptyLines": true
}
],
"vue/name-property-casing": [
"error",
"kebab-case"
],
"vue/no-unused-vars": "error",
"vue/no-v-html": "off",
"vue/singleline-html-element-content-newline": "off",
"vue/valid-v-slot": "error"
}
}
----edit------
turns out the same error happens with a much simpler example
var thing = {
test: 'a'
}
adding this to my config removed the error, still not sure where the auto-fix is coming from
"indent": [
"error",
4,
{
"SwitchCase": 1,
"ObjectExpression": "off"
}
]

How to fix flow type alias is not defined.eslint(no-undef) throwed by eslint

I have file of types:
// #flow
export type RouteT = {
api: string,
method: string,
route: string
}
And estlint throwing error 'RouteT' is not defined.eslint(no-undef).
What is wrong?
My eslint config is:
{
"parser": "babel-eslint",
"extends": [
"eslint:recommended",
"plugin:flowtype/recommended"
],
"plugins": [
"prefer-arrow",
"flowtype"
],
"env": {
"es6": true,
"node": true
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true,
"classes": true
},
"sourceType": "module"
},
"rules": {
"flowtype/define-flow-type": 0,
"quotes": [
"error",
"single",
{
"allowTemplateLiterals": true
}
],
"eol-last": [
"error",
"always"
],
"prefer-const": "error",
"prefer-arrow-callback": 1,
"comma-dangle": [
"error",
"always-multiline"
],
"indent": [
"error",
"tab",
{
"SwitchCase": 1
}
],
"no-else-return": "error",
"no-tabs": 0,
"no-var": "error",
"radix": "error",
"no-multiple-empty-lines": "error",
"brace-style": [
"error",
"1tbs"
],
"no-multi-spaces": [
"error"
],
"semi": [
"error",
"never"
],
"space-before-function-paren": [
"error",
{
"anonymous": "always",
"named": "always",
"asyncArrow": "always"
}
],
"no-console": 0
},
"globals": {
"logMsg": true
}
}
I don't understand what is wrong. Other types like string, number works correctly.
How can I fix it?
Thank you.

How to suppress warnings in sublimelinter using eslint?

I'm using sublime as my IDE, and have downloaded sublimelinter for linting my javascript with eslint. In the sublimelinter.sublimesettings file, I have it configured to use eslint shown below:
{
"user": {
"debug": false,
"delay": 0.25,
"error_color": "D02000",
"gutter_theme": "Packages/SublimeLinter/gutter-themes/Default/Default.gutter-theme",
"gutter_theme_excludes": [],
"lint_mode": "load/save",
"linters": {
"eslint": {
"#disable": false,
"args": [],
"excludes": [],
}
},
"mark_style": "outline",
"no_column_highlights_line": false,
"passive_warnings": true,
"paths": {
"linux": [],
"osx": [],
"windows": []
},
"python_paths": {
"linux": [],
"osx": [],
"windows": []
},
"rc_search_limit": 3,
"shell_timeout": 10,
"show_errors_on_save": false,
"show_marks_in_minimap": true,
"syntax_map": {
"html (django)": "html",
"html (rails)": "html",
"html 5": "html",
"javascript (babel)": "javascript",
"magicpython": "python",
"php": "html",
"python django": "python",
"pythonimproved": "python"
},
"warning_color": "000000",
"wrap_find": true
}
}
My problem is I can't find anything online to suppress the warnings that come from eslint. I've tried using "ignore": "W" as a value within eslint but it didn't work. Eslint works fine, I just can't seem to find a solution to suppressing the warnings. Any ideas?
EDIT:
Here's my .eslintrc file:
{
/* Don't search any further for .eslintrc files */
"root": true,
/* See all the pre-defined configs here: https://www.npmjs.com/package/eslint-config-defaults */
"extends": [
"eslint:recommended",
"defaults/configurations/google"
],
"ecmaFeatures": {
"jsx": true
},
"env": {
"browser": true,
"node": true,
"es6": true
},
"globals":{
"angular": 1,
"phoenix": 1,
"requirejs": 1
},
"rules": {
"indent": [
2,
2,
{ "SwitchCase": 1 }
],
/* We don't do this consistently, so disable it as it is treated as an error otherwise */
"newline-after-var": 0,
"dot-location": [2, "property"],
"no-extra-semi": 1,
"semi": 2,
"max-len": [2, 250, 2],
"eqeqeq": 2,
"comma-dangle": 1,
"no-console": 0,
"no-debugger": 1,
"no-extra-parens": 1,
"no-irregular-whitespace": 0,
"no-undef": 1,
"no-unused-vars": 2,
"semi-spacing": 1
}
}
The --quiet flag will suppress all warnings, but does not silence errors. Via the command line, you can run:
eslint --quiet
Alternatively, to have this flag automatically appended, add "quiet" to the args of the ESLint configuration, so you don't have to remember to add the flag each time.

Resources