webstorm/vscode~eslint配置

自定义webstrom的宏,使用eslint规则保存文件自动格式化代码

  1. 先启用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

  1. 安装插件 editorconfig
  2. 配置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    

原文地址:https://www.cnblogs.com/Lewiskycc/p/8250920.html

时间: 2024-08-29 09:47:59

webstorm/vscode~eslint配置的相关文章

Webstorm less watcher 配置

file > sttings > File watchers > 添加LESS watcher 配置如图: Webstorm less watcher 配置,布布扣,bubuko.com

Sass安装与Webstorm File Watcher配置

一.Sass安装 ruby安装 mac系统默认安装了ruby,可以直接跳过此步骤,linux和windows需要安装ruby环境. windows安装ruby环境: 到ruby官网下载自己系统适用的版本(我下的是2.1.7(x64)) 安装ruby,此步骤只需留意勾选Add Ruby executables to your PATH这个选项,它将添加环境变量,不然以后使用编译软件的时候会提示找不到ruby环境,影响Webstorm 自动编译. Sass安装(淘宝RubyGems镜像) 在开始菜单

Create-React-App项目外使用它的eslint配置

概述 使用Create-React-App脚手架感觉它的eslint配置有点好用,于是考虑不用Create-React-App脚手架该怎么使用这些配置. 我于是eject了Create-React-App脚手架,查看它的详细配置和官方文档,总结了使用它的eslint配置的方法,记录如下,供以后开发时参考,相信对其它人也有用. 配置 (1)首先安装依赖: npm install eslint --save-dev npm install babel-eslint --save-dev npm in

mac系统vscode环境配置,以及iTerm2配置Zsh + on-my-zsh shell

https://segmentfault.com/a/1190000013612471?utm_source=tag-newest https://ohmyz.sh/ 一:安装iTerm2终端 https://www.iterm2.com/downloads.html 1:查看当前的shell环境 echo $SHELL 2: 查看系统自带哪些shell cat /etc/shells 3:切换Zsh shell chsh -s /bin/zsh # Mac如下 # 在 /etc/shells

免安装方式的Python之VSCode环境配置

概述 本文旨在介绍免安装方式,在VSCode中搭建Python(3.73)的配置环境.至于Python是什么.它能做些什么,诸如此类的介绍均不在此文中介绍,相信能看此文的人,多多少少都会有些了解. VSCode 是款十分轻便的IDE,在用它开发 nodejs 项目时,开发体验十分不错,因此就想用它来替代 PyCharm IDE 来编写 Python 脚本. 注:虽说 PyCharm 强大,但毕竟笨重又收费,最最最主要的是本人喜欢系统干净的系统环境,对于能免安装的工具一律优先考虑免安装.因此经过一

vscode如何配置debug,python正则表达式如何匹配括号,关于python如何导入自定义模块

关于vscode如何配置debug的问题: 1.下载安装好python,并且配置好 环境变量 2.https://www.cnblogs.com/asce/p/11600904.html 3.严格按照上面进行操作的话,用vscode直接打开  文件夹即可 (.vscode文件中的launch.json文件其实就是指导软件在debug时如何做,可以自己生成,不用自定义设置) python正则表达式如何匹配括号,中括号一类的问题: 给括号加上[ ] 例如:abc(123)def  要匹配括号中的数字

eslint 配置规则介绍

eslint官网 部分规则的中文解释如下: "no-alert": 0,//禁止使用alert confirm prompt "no-array-constructor": 2,//禁止使用数组构造器 "no-bitwise": 0,//禁止使用按位运算符 "no-caller": 1,//禁止使用arguments.caller或arguments.callee "no-catch-shadow": 2,

vscode eslint插件对vue文件无效

vscode配置好了之后,只对.js文件提示 vue文件没有效果 改成如下配置就好了. "eslint.validate": [ "javascript", "javascriptreact", { "language": "html", "autoFix": true }, { "language": "vue", "autoFix&q

vue项目搭建配置与eslint配置过程

项目使用vue cli4.1.1搭建后 项目列表如下: 1.配置vue (vue.config.js) 2配置Eslint的格式化(项目使用的是VSCode编辑器) 安装三个插件 Vetur高亮语法  Prettier用 3.打开vscode 文件-->首选项-->设置 接着打开.elintrc.js进行配置 接着使用npm run lint对整个项目进行格式化 效果: ====> 原文地址:https://www.cnblogs.com/xifeng59/p/12038504.html