Webstorm/vscode~eslint Configuration

Customize Webstrom macros, save file Auto-formatting codes with Eslint rules

1. Enable Eslint First
   Settings (Preference), Languages & Frameworks, Javascript, Code quality Tools, ESLint, tick enable
   

When enabled, open the JS file in the project, right-click in the file, at the bottom of the context menu, you can see the Fix ESLint problems option, click this option to make sure ESLint is working properly, and if not, modify the ESLint settings first.

2. Create a macro that implements the ability to save the file's automatic formatting code using the Eslint rule

(1) Edit > Macros > Start macro Recording.

(2) Ctrl (CMD) + Alt + L (format code with Editorconfig)

(3) Ctrl + s/cmd + Alt + S (Save)

(4) Right-click Fix ESLint problems (fix code with ESLINT rules)

(5) Edit > Macros > End macro Recording, or simply click the end button of the macro at the bottom right of the page to end the macro record and create a name for the macro, such as Format (Editorconfig+eslint) and Save.

By this, the macro has been created.

3. Set the macro's shortcut key to Ctrl (CMD) + S.

Settings (Preference), Keymap

Search for Format (editorconfig+eslint) and Save

Locate the macro you just created, and double-click

Then click Add Keyboard Shortcut, and then click Ctrl (CMD) + S

Clicking Ok,webstrom will Prompt "The shortcut is already assigned to other actions. Want to remove the other assignments? ", click Remove so that the macro's shortcut is set to Ctrl (CMD) + S.

(Note that this will remove the previous Ctrl (CMD) + S shortcut keys, before Windows corresponding to the Save all function, here you can reset the save all shortcut keys in keymap, such as Ctrl + ALT + s)

After you've finished editing a file, using Ctrl + S, you'll first use Editorconfig to format the code, and then use Eslint to fix the code.

Install the appropriate Eslint module dependencies

        "eslint": "^4.12.0",        "eslint-config-standard": "^11.0.0-beta.0",        "eslint-loader": "1.9.0",        "eslint-plugin-import": "^2.8.0",        "eslint-plugin-node": "^5.2.1",        "eslint-plugin-promise": "^3.6.0",        "eslint-plugin-react": "7.1.0",        "eslint-plugin-standard": "^3.0.1",

Eslintrc.js Configuration

Module.exports = {' Root ': true, ' parser ': ' babel-eslint ', ' extends ': [' standard ', ' plugin:react/recommended '], ' parseroptions ': {' ecmaversion ': 6, ' sourcetype ': ' Module ', ' ecmafeatures ': {' jsx ': TR UE, ' experimentalobjectrestspread ': true, ' impliedstrict ': true}}, ' env ': {' B Rowser ': True, ' node ': true, ' Es6 ': true}, ' Plugins ': [' import ', ' react '], ' rules ': {' no-c                                      Onsole ': [' Error ', {' Allow ': [' warn ', ' Error ']}],//Prohibit Conosle allows Console.warn, Console.error ' no-alert ': ' Error ',       Disable alert, Promp, confirm ' no-empty ': [' Error ', {' Allowemptycatch ': true}],  Prohibit empty code blocks (except catch) ' No-extra-semi ': ' Error ',//Prohibit unnecessary semicolon ' default-case ':                                  ' ERROR ',//switch statement must have default ' dot-notation ': ' Error ',      Use point numbers whenever possible  ' No-else-return ': ' Error ',//Forbidden if statement has ' else ' block ' no-empty-function ' after return statement ': ' Error ',//suppress null function ' radix ': ' Error ',//force in Pars        Eint () uses the cardinality parameter ' semi ': [' error ', ' Always '], ' quotes ': [' Error ', ' single '], ' indent ': [' Error ', ' tab '], ' No-tabs ': ' Off ', ' one-var ': ' Off ', ' no-mixed-spaces-and-tabs ': [' off ', ' smart-tabs '], ' no-ext Ra-parens ': ' Warn ', ' no-template-curly-in-string ': ' Off ', ' key-spacing ': [' warn ', {' Beforecolon ': false, ' AF  Tercolon ': true}], ' keyword-spacing ': [' warn ', {' Before ': true, ' after ': true}], ' no-multi-spaces ': [' warn ', {' ignoreeolcomments ': true}], ' spaced-comment ': ' Off ', ' comma-dangle ': ' Off ', ' react/display-name ': ' Off ', ' react/prop-types ': [' warn ', {ignore: [' match ', ' location ', ' history '}], ' React/self-closing-comp ': [' Error ', {' component ':true}], ' import/no-webpack-loader-syntax ': ' Off '}} 

Vscode Configuration Eslint

1. Installing the plugin Editorconfig
2. Configure Editorconfig

root = true[*]indent_style = tabindent_size = 2charset = utf-8trim_trailing_whitespace = trueinsert_final_newline = trueend_of_line = lf# editorconfig-tools is unable to ignore longs strings or urlsmax_line_length = 120    

Webstorm/vscode~eslint Configuration