vscode常用插件

2021-10-26 本文已影响0人 YiYaYiYaHei

一、 vscode常用插件

1. any-rule

常用正则大全
使用：
按F1(或ctrl + shift + p) -> 输入zz可以看到正则列表（或者输入关键词, 比如"手机"）
图1-1

2. Auto Close Tag
自动补全 html 标签

3. Auto Rename Tag
自动完成另一侧标签的同步修改

4. Auto Babel ES6/ES7
添加JS Babel ES6/ES7语法着色

5. Beautify

格式化代码
settings.json配置：

// Beautify插件设置
  "[javascript]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "[html]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "javascript.updateImportsOnFileMove.enabled": "always",
  "beautify.config": "",
  "beautify.language": {
    "html": ["htm", "html", "vue"],
    "js": {
      "type": ["javascript", "json"],
      "filename": [".jshintrc", ".jsbeautify"]
    },
    "css": ["css", "scss", "less"]
  },
  "[vue]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  }

6. Bracket Pair Colorizer
成对儿的括号都会以不同的颜色进行区别

7. Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
汉化包

8. Git History

查看git修改记录
使用：

图9-1

9. GitLens

查看代码作者的身份，无缝地导航和浏览 Git存储库。
使用：

图9-1

10. git 操作
① 切换分支

图10-1
② 拉取代码并推送

图10-2
③ 提交

图10-3

图10-4
④ 回退

图10-5

图10-6

图10-7

图10-8

11. JavaScript (ES6) code snippets
ES6语法智能提示，以及快速输入，不仅仅支持.js，还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间

12. HTML Snippets
主要是针对html的语法的，支持以下标签

html5的全部标签
标签含义信息提示
一些描述性的语法

13. HTMLHint

对html代码格式的检查
需要配置，见在vscode工具中，使用eslint，stylelint，htmlhint对vue项目代码格式的检查

14. jshint
JSHint 是一个社区驱动的工具，可检测 JavaScript 代码中的错误和潜在问题。由于 JSHint 非常灵活，因此您可以在您期望执行代码的环境中轻松调整它。

15. Live Server
为静态和动态页面启动具有实时重新加载功能的开发本地服务器。

16. npm Intellisense
自动完成导入语句中的npm模块。

17. open in browser
当前的 html 文件用浏览器打开

18. Path Intellisense
路径自动补全

19. Polacode-2020

生成代码截图
使用：
按住ctrl + shift + p或F1 -> 输入polacode -> 选中要生成图片的代码
图19-1

20. Project Manager

如果你的公司有非常多项目，需要来回切换的话，推荐Project Manage可以让你轻松在项目直接替换，无需在导入项目文件夹打开。
使用：
按住ctrl + shift + p或F1 -> 输入project save project -> 输入标签名
图20-1
图20-2
图20-3
图20-4

21. Settings Sync

vscode同步设置
使用：
① 登录git
② 获取git 上的access token
图21-1
图21-2
图21-3
图21-4
图21-5
③ 获取git 上的gists id
图21-6
图21-7
图21-8
图21-9
④ vscode配置access token
打开 VSCode -> ctrl（mac 是 command） + shift + p -> 输入 sync -> 点击 Sync: Upload / Update Settings
图21-10
图21-11
输入图21-5保存的 access token,图21-9保存的 gist id
图21-12
配置成功后，setttings.json
图21-13
⑤ 查看同步记录
图21-14
图21-15
⑥ 同步设置
执行图21-14后，
图21-16
⑦ 重新设置同步
ctrl（mac 是 command） + shift + p 或 F1 -> 输入 sync -> 点击 Sync: Advance Options
图21-17
图21-18
图21-19
⑧ 下载设置
ctrl（mac 是 command） + shift + p 或 F1 -> 输入 sync -> 点击 Sync: Downloads Settings
或者 ctrl + alt + d
图21-20
图21-21
图21-22

22. CSS Peek

快速查看css定义
使用：
鼠标移至class/id名上，按下F12键
图22-1

23. Debugger for Chrome

在编辑器中打断点，让你轻松地在Chrome里调试JavaScript
使用：

图23-1
图23-2
图23-3

更多 Debugger for Chrome 看这里~

设置一键运行
图23-4
图23-5
图23-6
launch.json中加入启动命令

{
  // 使用 IntelliSense 了解相关属性。
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${file}"
    },
    {
      "command": "npm run start",
      "name": "npm run start",
      "request": "launch",
      "type": "node-terminal"
    },
    {
      "command": "npm run restart",
      "name": "npm run restart",
      "request": "launch",
      "type": "node-terminal"
    },
    {
      "command": "npm run build",
      "name": "npm run build",
      "request": "launch",
      "type": "node-terminal"
    }
  ]
}

图23-7

24. Html Css Support

在标签新增class的时候会提示之前写过的class
settings.json配置：

// Html Css Support插件设置（在标签新增class的时候会提示之前写过的class）
  "editor.parameterHints.enabled": true,
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  }

效果：

图24-1

25. Markdown Preview Enhanced

实时预览markdown，markdown使用者必备

图25-1

二、代码格式化相关

VScode格式化ESlint-方法（最全最好用方法！）

1. Prettier - Code formatter

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

// prettier 设置语句末尾不加分号
"prettier.semi": false,
// prettier 设置强制单引号
"prettier.singleQuote": true,
"prettier.tabWidth": 2,
"typescript.preferences.quoteStyle": "single",
 "javascript.preferences.quoteStyle": "single",

2. ESLint

eslint规则，可以配置保存时根据.eslintrc.js自动修复
.eslintrc.js配置(和vue.config.js同级)：

/**
 ********************************************************************
 * 1、不检查某一行代码：
 * '// eslint-disable-next-line' 在代码上一行使用  或者  '// eslint-disable-line' 和代码在一行
 * 2、不检查某一段代码：
 * 用 '/* eslint-disable 星号/' 包裹
 * 3、不检查某一文件/文件夹：
 * 将文件路径写入.eslintignore文件即可
 ********************************************************************
 */

module.exports = {
  root: true,
  // 此项是用来指定javaScript语言类型和风格，sourceType用来指定js导入的方式，默认是script，此处设置为module，指某块导入方式
  parserOptions: {
    parser: 'babel-eslint',
    ecmaVersion: 2017,
    sourceType: 'module'
  },
  globals: {
    $: true
  },
  // 此项指定环境的全局变量，下面的配置指定为浏览器环境
  env: {
    browser: true,
    node: true,
    es6: true
  },
  // eslint标准文档：https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  // 此项是用来配置标准的js风格，就是说写代码的时候要规范的写，如果你使用vs-code我觉得应该可以避免出错
  extends: [
    'standard',
    'plugin:vue/essential'
  ],
  // 此项是用来提供插件的，插件名称省略了eslint-plugin-，下面这个配置是用来规范html的
  plugins: [
    'vue'
  ],
  /*
   * 自定义规则    eslint中文官网：http://eslint.cn/docs/rules/
   * 下面这些rules是用来设置从插件来的规范代码的规则，使用必须去掉前缀eslint-plugin-
   * 0-'off'-关闭规则 1-'warn'-开启警告规则 2-'error'-开启错误规则（可以设置字符串也可以设置数字）
   */
  rules: {
    // 不强制 generator 函数中 * 号周围有空格
    'generator-star-spacing': 0,
    // production环境 禁止 debugger 语句
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    // 要求在语句末尾使用分号
    semi: [2, 'always'],
    // 禁用不必要的分号
    'no-extra-semi': 2,
    // 不强制在 function的左括号之前使用一致的空格
    'space-before-function-paren': [0, 'always'],
    // 禁止在判断语句 else 前有 return
    'no-else-return': 2,
    // 禁止出现空函数
    'no-empty-function': 2,
    // 不强制对多行注释使用特定风格
    'multiline-comment-style': 0,
    // 不禁止注释和代码出现在同一行
    'no-inline-comments': 0,
    // 禁止 if 语句作为唯一语句出现在 else 语句块中 类似if(){} else {if(){}}
    'no-lonely-if': 2,
    // 禁止连续赋值，类似const a = b = 1;
    'no-multi-assign': 2,
    // 禁用行尾空白
    'no-trailing-spaces': [2, {skipBlankLines: false}],
    // 不允许花括号中有空格，类似[ 1 ]
    'standard/array-bracket-even-spacing': [2, 'never'],
    // 不允许花括号中有空格，类似{ a:1 }
    'object-curly-spacing': [2, 'never'],
    // 允许出现多个空格
    'no-multi-spaces': [0, {'ignoreEOLComments': true}],
    // 允许 const a = [], b = []
    'one-var': [0, 'always']
  }
};

settings.json配置：

// eslint插件设置
  "files.autoSave": "off",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue",
    "html"
  ],
  "eslint.run": "onSave",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }

3. vetur

图3-1

settings.json配置：

// 选择 vue 文件中 template 的格式化工具
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // #让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  // vetur 的自定义设置
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
    },
    "prettier": {
      "singleQuote": true,
      "semi": false,
      "printWidth": 300,
      "wrapAttributes": false,
      "sortAttributes": false
    }
  },

4. vue生成代码片段

图4-1

图4-2
vue.json配置如下

{
    // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and
    // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
    // same ids are connected.
    // Example:
    // "Print to console": {
    //  "prefix": "log",
    //  "body": [
    //      "console.log('$1');",
    //      "$2"
    //  ],
    //  "description": "Log output to console"
    // }
  "vue": {
    "prefix": "vue",
    "body": [
        "<template>",
        "\t<div$3>",
        "\t\t$0",
        "\t</div>",
        "</template>",
        "\t",
        "<script>",
        "export default {",
        "\tname: '$1',",
        "\tdata() {",
        "\t\treturn {}",
        "\t}",
        "\tmethods: {",
        "\t}",
        "}",
        "</script>",
        "\t",
        "<style lang=\"less\" scoped>",
        "\t$0",
        "</style>"
    ],
    "description": "VueInit"
},
"template": {
    "prefix": "template",
    "body": [
        "<template>",
        "\t<div$2>",
        "\t\t$0",
        "\t</div>",
        "</template>"
    ],
    "description": "template element"
},
"script": {
    "prefix": "script",
    "body": [
      "<script>",
      "export default {",
      "\tname: '$1',",
      "\tdata() {",
      "\t\treturn {}",
      "\t}",
      "\tmethods: {",
      "\t}",
      "}",
      "</script>",
    ],
    "description": "script element"
},
"style": {
    "prefix": "style",
    "body": [
        "<style lang=\"less\" scoped>",
        "\t$0",
        "</style>"
    ],
    "description": "style element with lang attribute"
}
}

输入vue -> 按下enter键后：