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
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"
]
}
}
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
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"
}
]
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.
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.