19.vscode 扩展开发的几个api

// 设置选中
editor.selections = [new vscode.Selection(start.line, start.character, end.line,end.charactor)];

// 设置光标移动
vscode.commands.executeCommand("cursorMove",{
     to: "right",
     value:1,
     by:'character',
     select: false,
18. 30 个极大提高开发效率超级实用的 VSCode 插件
17.   vscode插件推荐 
16. vscode 扩展路径 C:\Users\{username}\.vscode\extensions下
15. vscode配置参考
  "explorer.confirmDelete": false,
  "window.zoomLevel": 0,
  "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
  "minapp-vscode.disableAutoConfig": true,
  "files.autoSave": "onFocusChange",
  "files.defaultLanguage": "${activeEditorLanguage}",
  "files.associations": {
    "*.vue": "vue",
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  "editor.renderWhitespace": "boundary",
  "editor.cursorBlinking": "smooth",
  "editor.minimap.enabled": true,
  "editor.minimap.renderCharacters": false,
  "editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",
  "editor.codeLens": true,
  "editor.formatOnType": true,
  "editor.fontSize": 18,
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  "typescript.updateImportsOnFileMove.enabled": "always",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "prettier.useEditorConfig": false,
  "prettier.printWidth": 200,
  // 如果你发现配置的默认格式化扩展是prettier,保存时却没有自动格式化,大概率是因为这个选项被设置成true
  "prettier.requireConfig": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  "eslint.alwaysShowStatus": false,
  "eslint.options": {
    "extensions": [".js", ".vue"]
  "editor.snippetSuggestions": "top",
  "emmet.syntaxProfiles": {
    "javascript": "jsx"
  "emmet.includeLanguages": {
    "wxml": "html",
    "vue": "html",
    "vue-html": "html"
  "emmet.triggerExpansionOnTab": true,
  "emmet.showSuggestionsAsSnippets": true,
  "git.confirmSync": false,
  "git.enableSmartCommit": true,
  "git.autofetch": true,
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/dist": true
  "code-runner.runInTerminal": true,
  "code-runner.executorMap": {
    "javascript": "node",
    "java": "cd $dir && javac $fileName && java $fileNameWithoutExt",
    "c": "cd $dir && gcc $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
    "cpp": "cd $dir && g++ $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
    "objective-c": "cd $dir && gcc -framework Cocoa $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
    "php": "php",
    "python": "python -u",
    "perl": "perl",
    "perl6": "perl6",
    "ruby": "ruby",
    "go": "go run",
    "lua": "lua",
    "groovy": "groovy",
    "powershell": "powershell -ExecutionPolicy ByPass -File",
    "bat": "cmd /c",
    "shellscript": "bash",
    "fsharp": "fsi",
    "csharp": "scriptcs",
    "vbscript": "cscript //Nologo",
    "typescript": "ts-node",
    "coffeescript": "coffee",
    "scala": "scala",
    "swift": "swift",
    "julia": "julia",
    "crystal": "crystal",
    "ocaml": "ocaml",
    "r": "Rscript",
    "applescript": "osascript",
    "clojure": "lein exec",
    "haxe": "haxe --cwd $dirWithoutTrailingSlash --run $fileNameWithoutExt",
    "rust": "cd $dir && rustc $fileName && $dir$fileNameWithoutExt",
    "racket": "racket",
    "scheme": "csi -script",
    "ahk": "autohotkey",
    "autoit": "autoit3",
    "dart": "dart",
    "pascal": "cd $dir && fpc $fileName && $dir$fileNameWithoutExt",
    "d": "cd $dir && dmd $fileName && $dir$fileNameWithoutExt",
    "haskell": "runhaskell",
    "nim": "nim compile --verbosity:0 --hints:off --run",
    "lisp": "sbcl --script",
    "kit": "kitc --run",
    "v": "v run",
    "sass": "sass --style expanded",
    "scss": "scss --style expanded",
    "less": "cd $dir && lessc $fileName $fileNameWithoutExt.css",
    "FortranFreeForm": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
    "fortran-modern": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
    "fortran_fixed-form": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
    "fortran": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
    "html": "\"C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe\""
  "sync.gist": "ee5caeded7a2860bfe57ee7e6ef52a73",
  "sync.autoUpload": true,
  "terminal.integrated.profiles.windows": {
    // 命名中不能有空格
    "GitBash": {
      "path": "E:\\Git\\bin\\bash.exe",
      "args": [],
      "icon": "terminal-bash"
    "PowerShell": {
      "source": "PowerShell",
      "icon": "terminal-powershell"
    "Command Prompt": {
      "path": ["${env:windir}\\Sysnative\\cmd.exe", "${env:windir}\\System32\\cmd.exe"],
      "args": [],
      "icon": "terminal-cmd"
  "terminal.integrated.defaultProfile.windows": "GitBash",
  "terminal.integrated.fontSize": 16,
  "bracketPairColorizer.depreciation-notice": false
14. prettier 配置参考
// 具体配置可以参考 https://prettier.io/docs/en/options.html
module.exports = {
  // 1.一行代码的最大字符数，默认是80(printWidth: <int>)
  printWidth: 120,
  // 2.tab宽度为2空格(tabWidth: <int>)
  tabWidth: 2,
  // 3.是否使用tab来缩进，我们使用空格(useTabs: <bool>)
  useTabs: false,
  // 4.结尾是否添加分号
  semi: true,
  // 5.使用单引号(singleQuote: <bool>)
  singleQuote: true,
  // 6.object对象中key值是否加引号（quoteProps: "<as-needed|consistent|preserve>"）as-needed只有在需求要的情况下加引号，consistent是有一个需要引号就统一加，preserve是保留用户输入的引号
  quoteProps: 'as-needed',
  // 7.在jsx文件中的引号需要单独设置（jsxSingleQuote: <bool>）
  jsxSingleQuote: false,
  // 8.尾部逗号设置，es5是尾部逗号兼容es5，none就是没有尾部逗号，all是指所有可能的情况，需要node8和es2017以上的环境。（trailingComma: "<es5|none|all>"）
  trailingComma: 'all',
  // 9.object对象里面的key和value值和括号间的空格(bracketSpacing: <bool>)
  bracketSpacing: true,
  // (已过时10.jsx标签多行属性写法时，尖括号是否另起一行(jsxBracketSameLine: <bool>)
  // jsxBracketSameLine: false,
  // 11.箭头函数单个参数的情况是否省略括号，默认always是总是带括号（arrowParens: "<always|avoid>"）
  arrowParens: 'always',
  // 12.range是format执行的范围，可以选执行一个文件的一部分，默认的设置是整个文件（rangeStart: <int>  rangeEnd: <int>）
  rangeStart: 0,
  rangeEnd: Infinity,
  // 14. requirePragma: <bool>,格式化有特定开头编译指示的文件 比如下面两种
   * @prettier
  // or
   * @format
  requirePragma: false,
  // 15.insertPragma: <bool> 自动插入pragma到已经完成的format的文件开头
  insertPragma: false,
  // 16. proseWrap: "<always|never|preserve>" 文章换行,默认情况下会对你的markdown文件换行 进行format会控制在printwidth以内
  proseWrap: 'always',
  // 17. htmlWhitespaceSensitivity: "<css|strict|ignore>" html中的空格敏感性
  // html文档片段 1<b>2</b>3 原本显示为123, 不设置忽略空格的话格式化后会变成 1<b> 2 </b>3 显示为1 2 3
  htmlWhitespaceSensitivity: 'ignore',
  // 18. vue script和style标签中是否缩进,开启可能会破坏编辑器的代码折叠
  vueIndentScriptAndStyle: false,
  // 19. endOfLine: "<lf|crlf|cr|auto>" 行尾换行符,默认是lf,
  endOfLine: 'lf',
  // 20. 控制被引号包裹的代码是否进行格式化, 默认是auto,
  embeddedLanguageFormatting: 'off'
// 13. 指定parser,因为pretter会自动选择,所以一般不用指定(parser: "<string>"  parser: require("./my-parser"))
// "babel" (via @babel/parser) Named "babylon" until v1.16.0
// "babel-flow" (same as "babel" but enables Flow parsing explicitly to avoid ambiguity) First available in v1.16.0
// "babel-ts" (similar to "typescript" but uses Babel and its TypeScript plugin) First available in v2.0.0
// "flow" (via flow-parser)
// "typescript" (via @typescript-eslint/typescript-estree) First available in v1.4.0
// "espree" (via espree) First available in v2.2.0
// "meriyah" (via meriyah) First available in v2.2.0
// "css" (via postcss-scss and postcss-less, autodetects which to use) First available in v1.7.1
// "scss" (same parsers as "css", prefers postcss-scss) First available in v1.7.1
// "less" (same parsers as "css", prefers postcss-less) First available in v1.7.1
// "json" (via @babel/parser parseExpression) First available in v1.5.0
// "json5" (same parser as "json", but outputs as json5) First available in v1.13.0
// "json-stringify" (same parser as "json", but outputs like JSON.stringify) First available in v1.13.0
// "graphql" (via graphql/language) First available in v1.5.0
// "markdown" (via remark-parse) First available in v1.8.0
// "mdx" (via remark-parse and @mdx-js/mdx) First available in v1.15.0
// "html" (via angular-html-parser) First available in 1.15.0
// "vue" (same parser as "html", but also formats vue-specific syntax) First available in 1.10.0
// "angular" (same parser as "html", but also formats angular-specific syntax via angular-estree-parser) First available in 1.15.0
// "lwc" (same parser as "html", but also formats LWC-specific syntax for unquoted template attributes) First available in 1.17.0
// "yaml" (via yaml and yaml-unist-parser) First available in 1.14.0
// 针对不同文件或目录设置不同配置的方法,json格式例子
//   "semi": false,
//   "overrides": [
//     {
//       "files": "*.test.js",
//       "options": {
//         "semi": true
//       }
//     },
//     {
//       "files": ["*.html", "legacy/**/*.js"],
//       "options": {
//         "tabWidth": 4
//       }
//     }
//   ]
13.VSCode 常用扩展
Prettier - Code formatter： 代码保存自动格式化
ESLint--代码质量检查
GitLens：查看文件变更记录。
SFTP：远程代码部署
Volar：vue代码高亮插件
json-tools：json文件有注释，末尾有逗号
bracket pair colorizer--高亮括号对应的范围
Vue VSCode Snippets--vue代码补全
12.Prettier和ESlint的区别
在格式化代码方面， Prettier 确实和 ESLint 有重叠，但它们侧重点不同：ESLint 主要工作就是检查代码质量并给出提示，它所能提供的格式化功能很有限；而 Prettier 在格式化代码方面就强大的多。
https://xiaogliu.github.io/2018/05/15/format-code-by-eslint-and-prettier/
11. package.json中有eslint,vscode中也有eslint，有什么区别？
准确的说应该是webpack中的eslint是加载器，全名是eslint-loader。是为了处理某些文件的加载器而已,因此它本质是loader。
vscode是一个编辑器，vscode中的eslint本质上是一个vscode插件，
它会调用eslint，然后将eslint的报错反馈给vscode，仅此而已。
 https://www.h5w3.com/13505.html
10.settings.json设置项
VSCode 打开settings.json的路径：Ctrl+Shift+P ==>settings.json==>用户区
settings.json分为默认，用户区，工作区，优先级为工作区 ==> 用户区 ==> 默认
用户区和默认都是针对所有工作区的文件夹而言的，
工作区是针对单个项目而言的
还可以对某种语言进行配置
https://blog.csdn.net/u013304372/article/details/78917536
9.vscode自动补全功能的坑
会自动导入库，提交代码的时候，要检查一下有没有预期之外的库引用
 8.运行js代码的插件Code-Runner的setting.json设置
    "code-runner.runInTerminal": true,
    "code-runner.executorMap": {
        "html": "\"C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe\"",
        "javascript": "node",
7.SFTP配置示例
    "name": "sftp-mpt.zuopeng.com",
    "context": "sass-mp/dist",
    "host": "10.0.5.67",
    "protocol": "sftp",
    "port": 36000,
    "username": "root",
    "password": "yzt@1234",
    "remotePath": "/home/web/mpt.zuopeng.com/frontend/dist",
    "uploadOnSave": false,
    "watcher": {
      "files": "/Users/penghui.wang/Desktop/project/sass-mp/dist/*.{js,css}",
      "autoUpload": false,
      "autoDelete": false
6.vscode 配置同步
1)打开vscode中的首选项-设置-点击设置右上角的‘打开设置同步’
2)选择GitHub登陆-然后从github跳转回vscode-全选需要保存的设置就成功了。
3)下次在新电脑上只需用同样的方法在vscode中登陆GitHub就能自动下载之前的扩展了。
5. prettier保存自动格式代码的方法
vscode格式化失效的解决方法 https://bin.zmide.com/?p=355
1)vscode插件搜索并安装prettier并重启vscode
2)添加 vscode setting配置 如下
{
　　//当保存文件的时候自动格式化
　　"editor.formatOnSave": true,
　　//禁止javascript的默认格式化
　　"javascript.format.enable": false,
　　//使用prettier-eslint 代替 prettier
　　"prettier.eslintIntegration": true,
}
4.vscode卸载的时候要手动删除下面的目录，才能卸载干净
C:Users/{user}/AppData/Roaming/Code
C:Users/{user}/.vscode
3.最新版vscode git-bash设置方法
  "terminal.integrated.profiles.windows": {
    // 命名中不能有空格
    "GitBash": {
      "path": "E:\\Git\\bin\\bash.exe",
      "args": [],
      "icon": "terminal-bash"
    "PowerShell": {
      "source": "PowerShell",
      "icon": "terminal-powershell"
    "Command Prompt": {
      "path": ["${env:windir}\\Sysnative\\cmd.exe", "${env:windir}\\System32\\cmd.exe"],
      "args": [],
      "icon": "terminal-cmd"
  "terminal.integrated.defaultProfile.windows": "GitBash"
2.vscode中文菜单配置
1）打开vscode工具，安装Chinese（Simplied） Lang扩展；
2）使用快捷键组合【Ctrl+Shift+p】，在搜索框中输入“configure display language”，点击确定后；
3）修改locale.json文件下的属性“locale”为“zh-CN”;
4）重启vscode工具；
如果重启后vscode菜单等仍然是英文显示，在商店查看已安装的插件，把中文插件重新安装一遍（如下图），然后在重启工具。
在上图中商店中搜索Chinese（Simplied） Lang，安装即可。
1.vscode字体设置 
文件首选项 ->字体大小设置  -> 18
Emmet插件及用法，VS code前端开发必备神器