VsCode开发工具下载及相关配置(一)

前言

满街会扬起红旗，满街会月饼飘香，国泰民安和阖家团圆，国与家撞了个满怀。

一.下载

下载地址：https://code.visualstudio.com/Download
下载完成直接安装；下面提供百度网盘地址：
链接：https://pan.baidu.com/s/1e9SsC0zvcL7rf6sncqej3Q
提取码：vbhp

此图片的alt属性为空；文件名为16369356881-1024x625.png

二.常用插件

1.汉化

按快捷键“Ctrl+Shift+P”。
在“vscode”顶部会出现一个搜索框。
输入“configure language”，然后回车。
“vscode”里面就会打开一个语言配置文件。
将“en-us”修改成“zh-cn”。
按“Ctrl+S”保存设置。
关闭“vscode”，再次打开就可以看到中文界面了。

或者直接下载插件；

2.代码格式化

2.1.下载插件

下载三个 ESLint 、Vetur 、Prettier 插件

2.2.配置Setting.json配置文件

格式化的快捷键

Windows：Shift + Alt + F
Mac： Shift + Option + F
Ubuntu： Ctrl + Shift + I

通配： 此配置支持 CSS、HTML、JS 和 Vue 等文件的格式化。大家可以参考，然后结合自己的需求去配置。如果没有特殊需求，也可以拿去直接用

{

  // tab 大小为2个空格

  "editor.tabSize": 2,

  // 100 列后换行

  "editor.wordWrapColumn": 100,

  // 保存时格式化

  "editor.formatOnSave": true,

  // 开启 vscode 文件路径导航

  "breadcrumbs.enabled": true,

  // prettier 设置语句末尾不加分号

  "prettier.semi": false,

  // prettier 设置强制单引号

  "prettier.singleQuote": true,

  // 选择 vue 文件中 template 的格式化工具

  "vetur.format.defaultFormatter.html": "prettyhtml",

  // 显示 markdown 中英文切换时产生的特殊字符

  "editor.renderControlCharacters": true,

  // 设置 eslint 保存时自动修复

  "eslint.autoFixOnSave": true,

  // eslint 检测文件类型

  "eslint.validate": [

    "javascript",

    "javascriptreact",

    {

      "language": "html",

      "autoFix": true

    },

    {

      "language": "vue",

      "autoFix": true

    }

  ],

  // vetur 的自定义设置

  "vetur.format.defaultFormatterOptions": {

    "prettier": {

      "singleQuote": true,

      "semi": false

    }

  }

}

3.插件浅解析

ESlint： javascript代码检测工具，可以配置每次保存时格式化js，但每次保存只格式化一点点，你得连续按住Ctrl+S好几次,才格式化好

Prettier – Code formatter：只关注格式化，并不具有eslint检查语法等能力，只关心格式化文件(最大长度、混合标签和空格、引用样式等)，包括JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown

vetur：可以格式化html、标准css（有分号、大括号的那种）、标准js（有分号、双引号的那种）、vue文件，像这样

Manta’s Stylus Supremacy：格式化stylus的插件（不用就不装），因为vetur会把css格式化有分号、大括号的那种，此插件会把css格式化成stylus风格，像这样

Beautify
打开要格式化的文件 —> F1 —> Beautify file —> 选择你要格式化的代码类型

然后选择需要格式化的类型

汇总一下一些插件之间的小问题
① Vetur 对模版HTML代码没有格式化缩进
vscode 对 vue 的支持也是很棒的。对于 vue 的格式化，我们用到了 Vetur 插件，Vetur 插件的格式化大多也是直接用的 prettier 规范，但我们会发现Vetur 对模版HTML代码没有格式化缩进，可以配置下面这个：
注意安装这个插件后，可以在设置中看到如下的内容：

然后在后面在配置一下这个就可以让HTML可以格式化缩进啦：

"vetur.format.defaultFormatter.html": "prettier"

② vetur + Manta’s Stylus Supremacy
解决安装了vetur，又想安装Manta’s Stylus Supremacy时去掉vetur添加的分号大括号时可以这样配置：

// 格式化stylus, 需安装Manta's Stylus Supremacy插件
"stylusSupremacy.insertColons": false, // 是否插入冒号
"stylusSupremacy.insertSemicolons": false, // 是否插入分好
"stylusSupremacy.insertBraces": false, // 是否插入大括号
"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
"stylusSupremacy.insertNewLineAroundBlocks": false // 两个选择器中是否换行

③ vetur 格式化的标准js文件不符合ESlint规范
vetur 格式化的标准js文件不符合ESlint规范，会给你加上双引号、分号等
解决 vetur、prettier 格式化的标准js文件不符合ESlint规范的配置

{
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 2,
// #每次保存的时候自动格式化
"editor.formatOnSave": true,
// #每次保存的时候将代码按eslint格式进行修复
"eslint.autoFixOnSave": true,
// 添加 vue 支持
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
// #让prettier使用eslint的代码格式进行校验
"prettier.eslintIntegration": true,
// #去掉代码结尾的分号
"prettier.semi": false,
// #使用带引号替代双引号
"prettier.singleQuote": true,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #这个按用户自身习惯选择
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
// #vue组件中html代码格式化样式

④ vue 文件和 html 文件，没有 eslint 风格提示
vue 文件和 html 文件，没有 eslint 风格提示

解决方法：
在 setting.json 文件中加入如下配置：

// eslint 检测文件类型
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue"
      "autoFix": true
    }
  ]

⑤ function () （eslint 推荐）和 function() （prettier 推荐）的风格冲突问题

该问题摘抄至文章：https://blog.csdn.net/userkang/article/details/84305689

如果推崇 eslint 的规范，也就是 function () 这种的。那么恭喜你，你什么都不用改。

如果你和我一样推崇 prettier 的规范，也就是 function() 这种的。那么就需要改改了。

先把 setting.json 中 eslint.validate 字段关于 vue 的自动修复功能注释掉。这样保证在格式化 vue 文件的时候，走
prettier 的规范，而不再需要根据 eslint 的规范，进行 fix。

{
"language": "vue"
// "autoFix": true
}

这样做有个好处是，如果你的项目不需要配置 eslint 来检查代码，代码就不需要格式化为 eslint 的规范。
但是如果你的项目配置了 eslint ，比如用 vue-cli 构建的项目，一般都会进行 eslint 检查。那么就在项目根目录的 eslintrc.js 中添加下面的配置，这种情况就可以把 autoFix 的注释打开了。因为可以自动修复成 eslint 的规范。

// 自定义的规则
module.exports = {
rules: {
'space-before-function-paren': 0
}
}

⑥ vue中使用Eslint对element-UI自动格式化支持不好

这个配置相应出现的问题可以参考这篇文章： https://blog.csdn.net/qq_34803821/article/details/84972781

参考文章
https://blog.csdn.net/Umbrella_Um/article/details/99704468

https://zhuanlan.zhihu.com/p/113222681

你小时候相当科学家，想当超人，想拯救世界，但后来你慢慢变了，变成那个只想给爸妈安稳的生活，给她一个美好的未来，给你们的孩子一个温馨的住所。。。你不再是超人，但你撑起了一个家。