7

前言

感觉搭建一个舒服的前端开发环境,十分的重要定制化的格式化,编辑器自带的格式化各种报错,手动改真的会死人,因此搭建一个编辑器环境必不可少,现在要讲的是vscode中如何定制vue

vs code的配置文件:

clipboard.png

format相关:搜索format,你会看到很多默认的格式化配置项。

clipboard.png
更改format配置你可以选择想要更改的内容,复制到右边进行更改,当然,有些配置项是装好插件才会出来的。后面所说的设置配置文件都是修改右边这里哦~

clipboard.png
安装插件:非常简单咯,点击左侧图标,然后输入你想搜索的名字就好了。当然有些插件可能没有被官方采纳。你也可以去github上下载。

clipboard.png

所以:你想要一个什么样的格式化基本上都可以实现,阅读一下不同插件的github里面的readme就可以了。


1 ESLint格式化

安装插件:ESLint

如果题主认真读了ESLint的Readme的话,应该可以写出下面的配置了。不过我还是写一下好了。
用来格式化和提示格式错误。设置文件类型:
clipboard.png

设置配置:

{
  "workbench.startupEditor": "welcomePage",
  "editor.tabSize": 2,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ]
}


2 在Vue项目中的ESLint

安装插件:Vetur

其实在工作中,我们往往不喜欢常常去按保存键,或者在保存之前想先格式化一下再继续写。因此,我采用了下面的方式: 默认自带了格式化的功能,快捷键是shift+option+f(mac)。主要用来格式化复制粘贴的代码。ESLint 在编码过程中提示格式错误,养成良好的编码习惯。

设置文件类型:

clipboard.png

设置配置:

{
  "vetur.format.defaultFormatter.html": "prettier" //这是vue中html的格式化
  "workbench.startupEditor": "welcomePage",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "editor.quickSuggestions": {
    "strings": true
  },
  "editor.tabSize": 2,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue",
    {
      "language": "html",
      "autoFix": true
    }
  ]
}

3 JS中的格式化

安装插件:Javascript Standard Style

clipboard.png

设置文件类型:
clipboard.png

4 废话少说,装好上面三个插件,大家可以参考我的配置,直接复制进去就行了

{
    "editor.fontSize": 19,
    "workbench.colorTheme": "Monokai",
    "workbench.startupEditor": "welcomePage",
    "editor.tabSize": 2,
    "eslint.autoFixOnSave": true,
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "editor.quickSuggestions": {
        "strings": true
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue",
        {
            "language": "html",
            "autoFix": true
        }
    ],
    "files.autoSave": "afterDelay",
    "vetur.format.defaultFormatter.html": "prettier"  
}

[原文]参考


曦沙飞舞
673 声望15 粉丝

爱前端,爱生活