webstorm/vscode~eslint配置
自定義webstrom的宏,使用eslint規則保存文件自動格式化代碼
- 先啟用ESLint
Settings(Preference) -> Languages & Frameworks -> Javascript -> Code Quality Tools -> ESLint, 勾上Enable
啟用之後,打開項目中的js文件,在文件中點擊右鍵,在右鍵菜單的最下方,可以看到 Fix ESLint Problems 選項,點擊該選項,確定ESLint可以正常使用;如果不能正常使用,請先修改ESLint的設置。
2.創建一個宏,用來實現使用eslint規則保存文件自動格式化代碼的功能
(1)Edit > Macros > Start Macro recording,開始一個宏的記錄
(2)Ctrl(Cmd) + Alt + L (使用editorconfig格式化代碼)
(3)Ctrl + S / Cmd + Alt + S (保存)
(4)點擊右鍵 -> Fix ESLint Problems (使用ESLint的規則修復一下代碼)
(5)Edit > Macros > End Macro recording,或者直接點擊頁面右下方宏的結束按鈕,結束該宏的記錄,並給該宏創建一個名字,例如 Format(editorconfig+eslint) and Save.
到此,宏已經創建好了。
3.設置該宏的快捷鍵為 Ctrl(Cmd) + S.
Settings(Preference) -> Keymap
搜索 Format(editorconfig+eslint) and Save
找到剛才所創建的宏,雙擊
再點擊Add Keyboard Shortcut,然後按一下 Ctrl(Cmd) + S
點擊OK,webstrom會提示 "The shortcut is already assigned to other actions. Do you want to remove other assignments?" ,點擊remove,這樣該宏的快捷鍵就設為 Ctrl(Cmd) + S了。
(註意,這裏會把之前的 Ctrl(Cmd) + S 的快捷鍵所移除,windows下之前對應的是Save All功能,這裏可以在keymap裏重新設置一下Save All的快捷鍵,例如 Ctrl + Alt + S )
之後,你在編輯完一個文件之後,使用一下 Ctrl(Cmd) + S ,就會先使用editorconfig格式化一下代碼,再使用ESLint修復一下代碼了。
安裝相應eslint模塊依賴
"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配置
module.exports = {
'root': true,
'parser': 'babel-eslint',
'extends': ['standard', 'plugin:react/recommended'],
'parserOptions': {
'ecmaVersion': 6,
'sourceType': 'module',
'ecmaFeatures': {
'jsx': true,
'experimentalObjectRestSpread': true,
'impliedStrict': true
}
},
'env': {
'browser': true,
'node': true,
'es6': true
},
'plugins': ['import', 'react'],
'rules': {
'no-console': ['error', {'allow': ['warn', 'error']}], // 禁止conosle 允許console.warn, console.error
'no-alert': 'error', // 禁止alert, promp, confirm
'no-empty': ['error', {'allowEmptyCatch': true}], // 禁止空代碼塊(catch除外)
'no-extra-semi': 'error', // 禁止不必要的分號
'default-case': 'error', // switch語句必須有default
'dot-notation': 'error', // 盡可能使用點號
'no-else-return': 'error', // 禁止 if 語句中 return 語句之後有 else 塊
'no-empty-function': 'error', // 禁止出現空函數
'radix': 'error', // 強制在parseInt()使用基數參數
'semi': ['error', 'always'],
'quotes': ['error', 'single'],
'indent': ['error', 'tab'],
'no-tabs': 'off',
'one-var': 'off',
'no-mixed-spaces-and-tabs': ['off', 'smart-tabs'],
'no-extra-parens': 'warn',
'no-template-curly-in-string': 'off',
'key-spacing': ['warn', {'beforeColon': false, 'afterColon': 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配置eslint
- 安裝插件 editorconfig
- 配置editorconfig
root = true
[*]
indent_style = tab
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
end_of_line = lf
# editorconfig-tools is unable to ignore longs strings or urls
max_line_length = 120
webstorm/vscode~eslint配置