VScode & WebStorm 配置自动保存并格式化Vue代码

1. VScode配置

  1. 安装eslintvetur插件

    VScode & WebStorm 配置自动保存并格式化Vue代码_第1张图片
    image
  2. command + ,打开配置项,点击编辑器右上角的{}符号

    VScode & WebStorm 配置自动保存并格式化Vue代码_第2张图片
    image
  3. 追加下列代码

    VScode & WebStorm 配置自动保存并格式化Vue代码_第3张图片
    image
    "eslint.autoFixOnSave": true,  //  启用保存时自动修复,默认只支持.js文件
        "eslint.validate": [
        "javascript",  //  用eslint的规则检测js文件
        {
            "language": "vue",   // 检测vue文件
            "autoFix": true   //  为vue文件开启保存自动修复的功能
        }
    ],
    
  4. 打开package.json文件,新增代码

    devDependencies: {
        "babel-eslint": "^10.0.1",
        "eslint": "^5.8.0",
        "eslint-plugin-vue": "^5.0.0",
        "@vue/eslint-config-standard": "^4.0.0",
    }
    
  5. 删除node_modules,重新下载:npm i

  6. ok!

2. WebStorem配置

  1. 同上述4,5两步,加入依赖,并下载

  2. command + ,打开配置项

    1. Languages & Frameworks
    2. 选中Javascript
    3. 选中Code Quality Tools
    4. 选中 Eslint
    5. 右侧界面,勾选Enable,启动eslint检测
    6. 选择Eslint Packages包为本地包(此处可以设置为全局,但是担忧全局的包版本和本地包版本不同,带来一系列问题,这个可以后期迭代,确认设置全局是否没问题)
VScode & WebStorm 配置自动保存并格式化Vue代码_第4张图片
image
  1. 打开vue,js文件,右键点击Fix ESlint Problems,则代码正常格式化
VScode & WebStorm 配置自动保存并格式化Vue代码_第5张图片
image
  1. 每次需要右键格式化,太麻烦,我们需要自定义一个 webstorm的宏任务,通过ctrl + s自动格式化

    核心原理:录制一段操作,并设定快捷键,之后通过快捷键将此次所有操作执行一遍。

    1. 打开一个.js/.html/.vue文件
    2. 选中webstorm导航Edit选项
    3. 选中Macros选项
    4. 选中Start Macros Recording(关键步骤,主要是录制)
VScode & WebStorm 配置自动保存并格式化Vue代码_第6张图片
image

之后所有的操作,都是被WebStorm记录

VScode & WebStorm 配置自动保存并格式化Vue代码_第7张图片
image

接下里的操作很关键,请注意:

  1. 在内容区域点击右键,找到 Fix ESlint Problems,并点击

  2. ctrl + s保存代码

  3. 最后点击上图的停止按钮,并保存自定义名字(此处我设置名称为save & format

VScode & WebStorm 配置自动保存并格式化Vue代码_第8张图片
image
  1. command + ,打开webstorm配置项
    1. 选中左侧栏目的 Keymap选项
    2. 在后侧内容区域,输入 save或者format关键字
    3. 选中刚才保存的名字,右击或者双击,选中 Add Keyboard Shortcut
VScode & WebStorm 配置自动保存并格式化Vue代码_第9张图片
image

​ 4. 按下ctrl + s,提示冲突覆盖的词语(不展示图了),覆盖即可

VScode & WebStorm 配置自动保存并格式化Vue代码_第10张图片
image

​ 5. OK,找一个vue/js文件测试即可

你可能感兴趣的:(VScode & WebStorm 配置自动保存并格式化Vue代码)