精华内容
下载资源
问答
  • vscode 前端最佳插件配置

    万次阅读 多人点赞 2018-02-12 10:23:27
    vscode最佳配置 配置说明详解 vscode配置内容在最后,已附上 ... editor是针对vscode的风格设置 ... 例如 iconTheme( 图标风格):使用插件 vscode-great-icons (需搜索安装) 例如 color...

    vscode最佳配置

    • 最近更新时间: 2021.02.12 (Vscode v1.53.2)

    • vscode 配置文件内容在最后,可直接copy使用

    配置详解


    editor是针对vscode的风格设置
    例如 tabSize:一个tab等于2个空格,行高为24px

    workbench是针对vscode的主题设置
    例如 iconTheme( 图标风格):使用插件 vscode-great-icons (需搜索安装)

    search.exclude 配置vscode中项目中的哪些地方被排除搜索,避免你每次搜索结果中都有一大堆无关内容


    files.associations 配置文件关联 :

    任何 vue 后缀的文件会被认为是 html 文件 ,(查看编辑器右下角) 然后 vscode 会用 html 规则匹配 vue 文件做相应格式化,代码提示等。

    任何 wxss 后缀的文件被认为是 css 文件 ,然后 vscode 会用 css 规则匹配 wxss 文件,对 css 的属性排序,rem 自动转换,格式化等

    	 "files.associations": {
    	        "*.vue": "html",
    	        "*.wxss": "css"
    	  }
    

    sync是用于同步vscode配置使用,不用每一次换个电脑都要复制一次配置,避免丢失或者改动,保持一致!收藏文章/复制粘贴最好。会持续更新

    apicloud 是用于同步 vscode 开发apicloud程序时进行手机wifi真机同步使用,不用数据线即可进行PC修改代码,真机调试

    veturprettier以及stylus是用于vue开发时的代码格式化, 代码提示.

    filesize在底部状态栏左侧,显示当前文件大小,没啥用

    Live Server快速启动本地服务器,注意只对.html和.htm文件有效。对html文件点击鼠标右键,选择open with Live Server.


    屏幕阅读器优化, 可选项. 此功能是 vscode 专门配合盲人阅读器而做的贴心选项,对于程序员来说也有一定作用( 哈哈哈, 可以纠正中式英文发音)
    例如:当你开启后,鼠标悬浮在桌面任何位置,语音朗读器都会朗读出来所在位置的内容。一旦在vscode中开启,那么底部会显示如图所示。具体设置在文尾。
    在这里插入图片描述

    vscode插件安装

    • Dracula Official 主题(我的最爱)
    • Atom One Dark Theme 主题
    • Material Icon Theme 图标主题
    • Bracket Pair Colorizer 每一对括号不同颜色 (括号强迫症必备)
    • indent-rainbow 凸显缩进着色,让你的缩进一目了然
    • EditorConfig for VS Code vscode的风格配置文件
    • GitLens 在代码中显示每一行代码的提交历史
    • Chinese Language Pack 中文语言包

    水桶套装!直接安装全部插件,插件互不干扰。

    vscode插件列表中, Ctrl + 鼠标左键 + 点击标题 可以弹出对应官方介绍


    • Auto Rename Tag - 自动重命名配对的HTML / XML标记 【全局】

    • Bookmarks 对代码片段添加书签,便于跳转 【全局】

    • Code Runner node,python等代码不必开命令行即可运行 【全局】

    • Image preview 图片预览 【全局】

    • Color Highlight 颜色高亮 【全局】

    • Comment Translate 自动将英文翻译为中文 【全局】

    • HTML CSS Support 在html/css文件中快速书写属性 Supported Languages

    • JavaScript (ES6) code snippets 快速书写ES6代码 Supported languages

    • cssrem 将css中的px自动转换为rem.再也不用计算器(大漠推介) 【局部】

    • Prettier 格式化,全世界都在使用Prettier来统一风格【局部】**

    • Eslint Js 语法检测 【全局】

    • Tslint Typescript 语法检测 【ts,js文件】

    • TypeScript Hero 快速书写Ts代码 【ts文件】

    • JSON to TS 将json代码转变为Ts代码 【全局】

    • Vetur 快速书写Vue代码 【vue文件】

    • Vue 2 Snippets 快速新建一个vue页面(参考文章【全局】

    • markdownlint md文件预览 【md文件】

    • Markdown All in One md文件格式化 【md文件】

    • Babel JavaScript Js文件转译 【js文件】

    • VS Code ES7 React/Redux/React-Native/JS snippets 快速书写React(非react项目,禁用) 【js文件】

    • React Native Tools 支持React Native项目,快速书写 es6 及 jsx 【js文件】

    • C/C++ 运行React Native项目时,有些文件的查看需要这个 【全局】

    • Python tab与空格的痛苦,写过python的都知道 【py文件】

    • XML Tools XML文件格式化以及高亮 【xml文件】

    • Flutter Flutter 2.0诞生,已入坑 【dart文件】

    • Awesome Flutter Snippets flutter 代码片段速写 【dart文件】

    • Built Value Snippets 配合Built Value快速生成dart模型 【dart文件】


    • View In Browser 迅速通过浏览器打开html文件 【局部】

    • Css Peek 在Html和Css文件中定位class和id样式. (右键单击选择器时,选择 Go to Definition和 Peek definition,vue中不可用)【html/css文件】

    • Path Intellisense 路径识别,书写文件引入地址时很方便。遗憾就是,对webpack项目中的路径别名无法识别 【全局】

    • npm Intellisense 在import语句中,自动填充npm模块。【js文件】

    • language-stylus CSS预处理器,styl后缀文件的识别扩展 【styl文件】

    • filesize 在底部状态栏左侧,显示当前文件大小,还可以点击哟 【全局】

    • Better Comments 对注释内容着色。快捷方式: 编辑器内输入 //*, 按Tab键 【全局】

    • REST Client 类似 postman ,直接在 VScode 中模拟发送http请求,调试极佳 【全局】

    • Live Server 快速启动一个本地服务器 【全局】


    以下插件为:可选以及不推介安装。
    以下插件 要么会导致VS体验变差,要么会导致快捷键冲突,如果没有相关需求,不再建议安装。

    • Sublime Text Keymap 启动sublimeText的快捷键配置 (sublimeText的老用户学着去适应Vscode的快捷键吧)
    • Visual Studio IntelliCode 支持 AI for Python,Ts/Js /Java 语法。(此插件主要用于AI开发,因此支持Node。安装之后,在Js代码书写中会给出AI提示。不进行AI开发的人员,无需安装)
    • Settings Sync 用于同步vscode配置,多台电脑一份配置(配置复杂,没什么必要)

    {
      // VScode主题配置
      "editor.tabSize": 2,
      "editor.lineHeight": 24,
      "editor.renderLineHighlight": "none",
      "editor.renderWhitespace": "none",
      "editor.fontFamily": "Consolas",
      "editor.fontSize": 15,
      "editor.cursorBlinking": "smooth",
      "editor.multiCursorModifier": "ctrlCmd",
      "editor.wordWrap": "off", // 永不换行
      "editor.wordWrapColumn": 400,
      "editor.linkedEditing": true,
      "explorer.confirmDelete": false,
      "workbench.startupEditor": "newUntitledFile",
      "workbench.iconTheme": "material-icon-theme",
      "workbench.colorTheme": "Dracula Soft",
      "workbench.colorCustomizations": {
        "editorIndentGuide.activeBackground": "#ff0000" // 设置guide线高亮颜色,可以改为自己喜欢的颜色
      },
      // 代码提示显示位置,控制自定义代码片段所处位置。许多插件都有snippet代码提示功能,top表示自定义片段会优先显示在最上方
      "editor.snippetSuggestions": "top", 
      // 代码提示默认选中项。coding时,VScode会给出很多提示,在所有的提示选项中会默认选中一个,这一配置就是表示默认选中哪一项。
      // 此项配置十分精妙,自己改改探索一下。
      // "first":VScode将总是选中第一项
      // "recentlyUsed":(默认值)vscode将从代码提示中,预先选中最近使用过的项
      // "recentlyUsedByPrefix": (推介)vscode将从所有可用代码提示片段中,预先选中最近使用过的项,支持联想功能
      "editor.suggestSelection": "first",
      "editor.quickSuggestions": {
        // 是否显示可能用到的示例代码.安装插件过多,建议选项也会非常多
        "other": true,
        "comments": true,
        "strings": false
      },
      "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
      // css2rem插件: 书写css时,px单位自动提示转换为rem单位
      // 此处根字体大小设置为100(默认为16), 注意与你项目中rem数值保持一致
      "cssrem.rootFontSize": 100,
      // 推介终端启动快捷键:  ctrl + shift + C
      // 设置默认终端,比如我用到了 cmder,那么可以把这里的地址改为电脑cmder的安装位置
      "terminal.external.windowsExec": "C:\\software\\cmder\\Cmder.exe",
      // 设置VScode内置终端。通常改为自己电脑中git安装位置
      // 内置终端启动快捷键: ctrl + shift + `
      "terminal.integrated.shell.windows": "C:\\software\\Git\\git-bash.exe",
      "workbench.editor.limit.enabled": true, // 是否限制每一个VSCODE窗体内显示的编辑器窗体数量(默认为关闭)。
      "workbench.editor.limit.perEditorGroup": true, // 是对打开的所有VSCODE窗体进行限制还是只对当前VSCODE窗体限制
      "workbench.editor.limit.value": 8, // 打开的编辑器的最大数量(默认为10,超出数量会自动关闭)
      "javascript.updateImportsOnFileMove.enabled": "always", // 移动文件或者修改文件名时,是否自动更新引用了此文件的所有文件。
      "[json]": {
        // 对json文件,使用 JSON语言功能 进行格式化
        "editor.defaultFormatter": "vscode.json-language-features"
      },
      "[jsonc]": {
        "editor.defaultFormatter": "vscode.json-language-features"
      },
      "[html]": {
        // 对html文件,使用 vscode.html-language-features(vscode内置规则) 进行格式化,不要使用 prettier
        "editor.defaultFormatter": "vscode.html-language-features"
      },
      "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[less]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[vue]": {
        // 可选值: eslint :"dbaeumer.vscode-eslint"  vetur: "octref.vetur"   prettier: "esbenp.prettier-vscode"
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[markdown]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[typescript]": {
        // 对ts文件进行格式化时,使用哪一种风格 (此处使用的是vscode中安装的ts插件默认风格进行格式化)
        "editor.defaultFormatter": "vscode.typescript-language-features"
      },
      "breadcrumbs.enabled": true, // 启用/禁用顶部面包屑导航(可以直接跳转文件)
      "open-in-browser.default": "chrome", // 配置打开html文件的默认浏览器
      "search.exclude": {
        // VScode进行文件搜索时,不搜索这些区域。
        "**/node_modules": true,
        "**/bower_components": true,
        "**/*.code-search": true,
        "**/.DS_Store": true,
        "**/.git": true,
        "**/.gitignore": true,
        "**/.idea": true,
        "**/.svn": true,
        "**/.vscode": true,
        "**/build": true,
        "**/dist": true,
        "**/tmp": true,
        "**/yarn.lock": true,
        "**/assets": true
      },
      // 配置是否在左侧目录列表中显示该文件/文件夹
      "files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/CVS": true,
        "**/.DS_Store": true,
      },
      // 配置文件关联
      "files.associations": {
        // 比如小程序中的 .wxss 这种文件,会把它作为css文件来处理,以便相关插件提供对应的css的语法提示,css的格式化等。
        "*.wxss": "css",
        "*.cjson": "jsonc",
        "*.wxs": "javascript",
        "*.ts": "typescript",
        "*.vue": "vue",
        "*.dart": "dart",
        "*.json": "jsonc",
        ".prettierrc": "jsonc"
      },
      // 配置emmet是否启用tab展开缩写
      // vscode已经内置emmet,这一设置最大作用是:当输入的文本不属于Emmet定义的缩写规则时,依然允许使用Tab键进行扩展。此时会提示自定义的缩写语句,以及各插件自定义的缩写语句.
      "emmet.triggerExpansionOnTab": true,
      "emmet.showSuggestionsAsSnippets": true, // 是否将自定义的代码片段作为提示建议显示。
      "emmet.syntaxProfiles": {
        // 配置emmet支持哪些类型的文件
        "vue-html": "html",
        "vue": "html",
        "javascript": "javascriptreact",
        "xml": {
          "attr_quotes": "double"
        }
      },
      "emmet.includeLanguages": {
        "wxml": "html",
        "vue-html": "html",
        "javascript": "javascriptreact",
        "jsx-sublime-babel-tags": "javascriptreact", // 在 react 的jsx中添加对emmet的支持
      },
      // ===================格式化文件================
      // 粘贴后的内容, 是否自动格式化
      "editor.formatOnPaste": false,
      // 格式化快捷键: shirt + alt + F   
      // 自动删除代码中无用的 import 引用,并排序: shift + alt + o
      // 使用 shirt + alt + F 进行格式化时,先执行编辑器的格式化规则,然后执行 eslint 和 tslint 等其他插件格式化规则。
      // vetur - prettier 可用格式化规则配置
      // "vetur.format.defaultFormatterOptions": {
      //   "prettier": {
      //     "printWidth": 130,
      //     "tabWidth": 2,
      //     "useTabs": false,
      //     "singleQuote": false, // 单引号
      //     "semi": true, // 未尾封号
      //     "trailingComma": "none", // es5:object和array最后一个属性后面,是否添加逗号
      //     "proseWrap": "never",
      //     "bracketSpacing": true,
      //     "jsxBracketSameLine": false,
      //     "arrowParens": "always",
      //     "insertPragma": false,
      //     "vueIndentScriptAndStyle": true,
      //     "quoteProps": "as-needed",
      //     "jsxSingleQuote": false, // jsx单引号
      //     "requirePragma": false,
      //     "htmlWhitespaceSensitivity": "strict",
      //     "endOfLine": "lf",
      //   }
      // },
      /// if => 关闭编辑器自带保存格式化功能,此功能会用Vetur进行格式化
      "editor.formatOnSave": true,
      "editor.codeActionsOnSave": {
        // 自动对 import 这种符合CommonJS规范语句进行排序,
        // 要使此功能生效,要求使用到星号的语句写在当前文件顶部,例如:import * as Some from "R"
        "source.organizeImport": true,
        // 自动引入缺少的库
        "source.addMissingImports": true,
        /// else => 
        "source.fixAll": true, // 对所有文件,保存时自动格式化
        // "source.fixAll.eslint": false, // 更细. 在文件保存时,eslint规则生效。此配置会影响 eslint.format.enable
        // "source.fixAll.tslint": false, // 更细. 在文件保存时,tslint规则生效。 此配置会影响 typescript.validate.enable
        // "source.fixAll.stylelint": false // 更细. 在文件保存时,stylelint样式规则生效
      },
      // 是否开启 tslint代码规范检测 (与eslint 开启一种即可)
      "typescript.validate.enable": false,
      "eslint.options": {
        // eslint配置文件 ,修改为你自己电脑上的文件位置,或者直接删除
        // 建议统一使用prettier进行配置
        // "configFile": "D:/worksapce/vue-project/.eslintrc.js",
      },
      // eslint规则对以下几种类型文件生效
      "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "typescript",
        "typescriptreact",
        "vue"
      ],
      "git.autofetch": true, // 在push代码时,是否先自动从远端拉取代码
      "git.enableSmartCommit": true,
      "gitlens.advanced.messages": {
        // 配置gitlen中git提交历史记录的信息显示情况
        "suppressCommitHasNoPreviousCommitWarning": false,
        "suppressCommitNotFoundWarning": false,
        "suppressFileNotUnderSourceControlWarning": false,
        "suppressGitVersionWarning": false,
        "suppressLineUncommittedWarning": false,
        "suppressNoRepositoryWarning": false
      },
      "debug.openDebug": "openOnDebugBreak", // 断点调试时,遇到断点,自动显示调试视图。(全局,不可为每种语言单独配置)
      /// **python开发专用配置** 
      "python.linting.enabled": false, // 是否格式化python文件
      "minapp-vscode.disableAutoConfig": true,
      /// **apicloud开发专用配置** 。
      "apicloud.port": "23450", // 设置apicloud在vscode中的wifi真机同步时的端口
      "apicloud.subdirectories": "/apicloudproject", // 设置apicloud在vscode中的wifi真机同步根目录,默认可不设置
      /// **dart语言专用配置**
      "dart.checkForSdkUpdates": false,
      "dart.previewLsp": true,
      "dart.warnWhenEditingFilesOutsideWorkspace": true,
      "dart.openDevTools": "flutter",
      "dart.enableCompletionCommitCharacters": true,
      "dart.flutterHotRestartOnSave": true,
      "dart.lineLength": 120,
      "dart.previewFlutterUiGuides": true,
      "dart.triggerSignatureHelpAutomatically": true,
      "dart.debugExternalLibraries": true,
      "dart.debugSdkLibraries": true,
      "[dart]": {
        // 保存文件时,是否自动格式化代码,
        "editor.formatOnSave": true,
        // 当你输入特定字符时,是否自动格式化代码,(比如输入 `;` 和 `}`).
        "editor.formatOnType": true,
        // 在120个字符处画一条引导线,这个范围内的dart代码将被格式化。
        "editor.rulers": [
          120
        ],
        // 禁用与所选内容匹配的单词的内置突出显示。如果不这样做,所选文本的所有实例都将突出显示,从而影响Dart突出显示所选变量的精确引用的能力。
        "editor.selectionHighlight": false,
        // 默认情况下,当处于“代码片段模式”(在插入的代码中编辑占位符)时,VS会防止snippets弹出打开。
        // 如果设置为“false”,则表示允许完成操作打开,就像不在代码段占位符中
        "editor.suggest.snippetsPreventQuickSuggestions": true,
        "editor.suggestSelection": "recentlyUsedByPrefix",
        // 允许使用按<tab>速写代码片段,例如,输入“for”时,即使完成列表不可见。
        "editor.tabCompletion": "onlySnippets",
        // 默认情况下,当前的语言没有代码片段提示时,VS Code将使用当前文件中的你自己写过的单词来显示代码片段提示。
        // 这导致代码完成在编辑注释和字符串时建议单词。 此设置将阻止这种情况
        // 对于dart来说最好关闭,对于html和css建议开启
        "editor.wordBasedSuggestions": false,
        // 在文件底部添加新代码行时,强制所有文件都有一行空格。
        "files.insertFinalNewline": true
      },
      /// **java语言专用配置**
      // 由于我本机java版本为 Java1.8 , vscode内置的vscode-java依赖于openJDK 并且要求版本大于等于 11,所以总是会弹出一个报错窗口。
      // https://github.com/redhat-developer/vscode-java/wiki/JDK-Requirements#java.configuration.runtimes,解决办法如下
      // 1. 下载 openJDK11 并安装,下载地址:https://adoptopenjdk.net/
      // 2. 配置 java.home 为刚刚安装的 openJDK11 的位置
      // 3. 由于我只希望在Vcode中使用JDK11版本,在实际项目中的配置不变,所以配置 java.configuration.runtimes
      "java.home": "C:/Program Files/JavaAdoptOpenJDK/jdk-11.0.8.10-hotspot",
      "java.configuration.runtimes": [
        {
          "name": "JavaSE-1.8",
          "path": "C:/Program Files/Java/jdk1.8.0_211",
        },
        {
          "name": "JavaSE-11",
          "path": "C:/Program Files/JavaAdoptOpenJDK/jdk-11.0.8.10-hotspot",
          "default": true
        },
      ],
      // 多行注释合并
      "commentTranslate.multiLineMerge": true,
      // 注释采用简洁模式
      "commentTranslate.concise": true,
      // VScode更新后,是否显示版本changeLog
      "versionlens.suggestions.showPrereleasesOnStartup": true,
      "liveServer.settings.donotShowInfoMsg": true,
      "vetur.ignoreProjectWarning": true
    }
    

    其他功能

    1. 使用vscode添加自定义snippets

    当你写代码时,时常用的代码片段,使用此方法定义,会飞速提高你的编码效率,以下以添加注释信息为例(可以添加任意代码片段)

    文件 >> 首选项 >> 用户片段 >> 新建全局代码片段 >> 输入命名author,粘贴保存。

    测试方法:新建一个文件,输入author,按回车键

    在这里插入图片描述


    {
    	"用户信息": {
    		// prefix: 在编辑器中输入的此内容时,在编辑器建议中会显示该片段。
    		"prefix": "author",
    		// TM_FILENAME_BASE : 当前文件名
    		// CURRENT_YEAR : 年(4位数)  CURRENT_YEAR_SHORT:年(2位数)  CURRENT_MONTH:月  CURRENT_DATE:日 
    		// CURRENT_HOUR :小时  CURRENT_MINUTE :分钟 CURRENT_SECOND:秒
    		"body": [
    			"/**",
    			" * * 描述信息.作者是谁",
    			" * ! author: ifredom",
    			" * ? description: ifredom是一位FD.",
    			" * @param ${TM_FILENAME_BASE}",
    			" * TODO: since: 创建时间  ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
    			" **/",
    			""
    		],
    		// 描述说明,在片段说明中会显示此字段的文本内容。
    		"description": "自定义代码片段.注释用户信息"
    	}
    }
    

    2. Screen Reader(屏幕阅读器)

    支持windows7以上操作系统,不支持mac,作为练习英语听力的小玩具.

    首先下载并安装软件,Nvda, 需要的pass: he2m
    安装完成此软件后启动。在vscode中配置项editor.quickSuggestions决定是否开启.

    3. vue项目,格式化规范 .eslintrc.js

    vscode中使用eslint 和prettier进行格式化(可以无缝衔接setting.json配置)

    4. react项目额外配置

    react项目(使用 npx create-react-app my-app 创建),有时会发现eslint检验规则不生效,此时在当前项目,需要额外安装2个插件。

    1. npm install --save-dev eslint-plugin-html eslint-plugin-react
    2. 要么删除此项配置,要么配置为你自己的校验规则地址
      "eslint.options": {
        "configFile": "D:/worksapce/my-app/.eslintrc.js",
      }
    

    5. 插件快捷键冲突问题

    插件安装过多时,不可避免会出现快捷键冲突。为了解决冲突,需要打开快捷键清单,根据插件名称搜索对应插件快捷键,比如我输入: emmet, 对准任意一条快捷键选项,点击鼠标右键,选择显示相同的按键绑定,修改为自己喜欢的快捷键即可。(建议仅对冲突的进行更改)

    • 文件 --> 首选项 --> 键盘快捷方式

    ------ 如果文章对你有用,感谢右上角 >>>点赞 | 收藏 <<<

    展开全文
  • VSCode 路径自动补全插件

    万次阅读 2018-05-24 14:15:00
    2019独角兽企业重金招聘Python工程师标准>>> ...

    Path Intellisense

    iaHeUiDeTUZuo.gif 

    转载于:https://my.oschina.net/ZhenyuanLiu/blog/1817990

    展开全文
  • vscode 前端常用插件推荐

    万次阅读 多人点赞 2019-01-07 00:09:49
    1. vscode 简介 vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscode重新定义(redefined)了代码编辑器。 当前市面上常用的轻型代码编辑器主要是:sublime,notepad++,editplus,atom这几种。 比...

    1.  vscode 简介

    1. vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscode重新定义(redefined)了代码编辑器。
    2. 当前市面上常用的轻型代码编辑器主要是:sublime,notepad++,editplus,atom这几种。
    3. 比起notepad++、editplus,vscode集成了许多IDE才具有的功能,比起它们更像一个代码编辑器;
    4. 比起sublime,vscode颜值更高,安装配置插件更为方便;
    5. 比起atom,vscode启动速度更快,打开各种大文件不卡。
    6. 可以说,vscode既拥有高自由度、又拥有高性能和高颜值,最关键的是,vscode还是一款免费并且有团队持续快速更新的代码编辑器。
    7. 可以说,vscode是代码编辑器的首选。个人推荐编写前端代码时,代码编辑器选择vscode,IDE选择WebStorm。
    8. vscode安装插件只需要点击图片所示按钮,即可进入拓展,在搜索框中输入插件名点击安装后,等待安装好即可点击重新加载重启vscode使得插件生效。

    9. 当你不需要某个插件时只需要进入扩展,点击对应插件右下角的齿轮按钮即可选择禁用或卸载该插件。

     

    2.  前端常用插件  (ps: 必备 > 推荐 > 了解)

           必备的一定要装, 推荐的看自己需要, 了解的可不装 !!!

      1.Auto Close Tag (必备)

      自动闭合HTML/XML标签


     

       2.Auto Rename Tag (必备)

      自动完成另一侧标签的同步修改

     

      

      3.Beautify (必备)

          格式化 html ,js,css

      vue 里面配置方法和快捷键配置 戳这里

     

          另一款  Prettier

         格式化JavaScript / TypeScript / CSS 

         配置教程 戳这里

     

      4.Bracket Pair Colorizer (必备)

      给括号加上不同的颜色,便于区分不同的区块,使用者可以定义不同括号类型和不同颜色

     

     

      5.Debugger for Chrome (推荐)

      映射vscode上的断点到chrome上,方便调试

           调试方法戳这

     

     

      6.ESLint (推荐)

      js语法纠错,可以自定义配置,不过配置较为复杂,建议使用网上一些广泛使用的eslint配置,日后我也会专门针对eslint配置写一篇文章。

     

     

      7.GitLens(使用git的必备)

      方便查看git日志,git重度使用者必备

           使用教程

     

     

      8.HTML CSS Support (必备)

      智能提示CSS类名以及id 

     

     

      9.HTML Snippets (必备)

      智能提示HTML标签,以及标签含义

     

     

      10.JavaScript(ES6) code snippets (必备)

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

     

     

      11.jQuery Code Snippets (推荐)

      jQuery代码智能提示

     

     

      12.Markdown Preview Enhanced (推荐)

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

     

     

      13.markdownlint (推荐)

      markdown语法纠错

     

     

      14.Material Icon Theme (推荐)

      vscode图标主题,支持更换不同色系的图标,值得点出的是,该插件更新极其频繁,基本和vscode更新频率保持一致

           极简主义是不需要的

     

     

          另一套 目录树图标主题 vscode-icons 

    使用方法,配置如下json

     

      15.open in browser (必备)

      vscode不像IDE一样能够直接在浏览器中打开html,而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件,支持自定义打开指定的浏览器,包括:Firefox,Chrome,Opera,IE以及Safari

    设置默认浏览器 

     

      16.Path Intellisense (必备)

      自动提示文件路径,支持各种快速引入文件

     

     

      17.React/Redux/react-router Snippets (推荐)(react必备)

      React/Redux/react-router语法智能提示

     

    补充两个

    1) React-Native/React/Redux snippets for es6/es7

    react代码片段,下载人数超多

    2) react-beautify

    格式化 javascript, JSX, typescript, TSX 文件

     

     

      18.Vetur (推荐)(vue必备)

      Vue多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。vscode官方钦定Vue插件,Vue开发者必备。

     

    补充 两个: 

    1) VueHelper

    vue代码片段

    2) Vue TypeScript Snippets

    vue的 typescript 代码片段

    3) Vue 2 Snippets

    vue 2代码片段

     

           19.Dracula Official (推荐)

      很好看的一款主题风格

        这样的

           

           20.filesize (了解)

      查看文件大小

     

     

     

           20.HTMLHint(了解)

       静态检查规则 具体规则戳这

     

         21. Class autocomplete for HTML (推荐)

         智能提示HTML class =“”属性(必备)

     

         22. IntelliSense for CSS class names (推荐)

         智能提示 css 的 class 名

         

         23.  Npm Intellisense(node必备)

         require 时的包提示

     

    如果还有好的插件我会随时补充 ~~~

    这里有一份更详细的清单,欢迎参考

    vscode 官方插件库​​​​​​​

    展开全文
  • 编写一款属于自己的VsCode自动提示插件vscode-auto-code) 对于许多公司内部的UI框架,我们可以通过VsCode 拓展插件来实现公司内部的插件封装 内容展示 项目根目录创建 prompt-config.json 文件 { "bar": { /...

    编写一款属于自己的VsCode自动提示插件(vscode-auto-code)

    对于许多公司内部的UI框架,我们可以通过VsCode 拓展插件来实现公司内部的插件封装
    在这里插入图片描述

    内容展示

    项目根目录创建 prompt-config.json 文件

    {	
    	"bar": {
    		/*  匹配输入内容  格式 [ Array |  String ]*/
    		"body": "<mu-bar cellspacing></mu-bar>",
    		/ * 用于内容描述 */
    		"describe": "工具栏 | 左右两列布局"   
    	},
    	"button": {
    		"body": [
    			"<mu-button",
    			"button-type=\"normal\"",
    			"button-style=\"text\"",
    			"button-shape=\"round\"",
    			"icon-class=\"\"",
    			"@click=\"\"></mu-button>"
    		],
    		"describe": "type:normal | primary | submit | danger; style: outline | link"
    	},
    	"editor": {
    		"body": [
    			"<mu-editor",
    			"></mu-editor>"
    		],
    		"describe": ""
    	},
    	"calendar": {
    		"body": [
    			"<mu-calendar",
    		      "language=\"en\"",
    		      "v-model=\"\"",
    		      "select-mode='date'",
    		      ":range-start=\"rangeStart\"",
    		      ":range-end=\"rangeEnd\"",
    		      ":marked-dates = \"markedDates\"",
    		      "style=\"height: 400px; width: 600px;\">",
       			 "</mu-calendar>"
    		],
    		"describe": ""
    	}
    }
    

    应用 (vue | html 文件下面)

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    插件实现

    1. 使用 npm install -g yo generator-code 安装官方脚手架
    2. 然后cd到你的工作目录,运行 yo code 
    3. 然后一步一步操作即可
    4. package.json
    
    {
    "name": "vscode-auto-code",    // 插件名称
    "displayName": "vscode-auto-code",
    "description": "VSCode自动补全代码插件",
    "keywords": [
        "vscode",
        "autoCode"
    ],
    "version": "", // 发布时候需要用的版本号
    "publisher": "", // 发布人 需要和 vscode发布人名称一样
    "engines": {
        "vscode": "^1.27.0"
    },
    "categories": [
        "Other"
    ],
    "activationEvents": [
        "*"
    ],
    "main": "./src/extension",  // 入口文件
    "contributes": {
    },
    "scripts": {
        "postinstall": "node ./node_modules/vscode/bin/install",
        "test": "node ./node_modules/vscode/bin/test"
    },
    "devDependencies": {
        "typescript": "^2.6.1",
        "vscode": "^1.1.6",
        "eslint": "^4.11.0",
        "@types/node": "^7.0.43",
        "@types/mocha": "^2.2.42"
    },
    "license": "SEE LICENSE IN LICENSE.txt",
    "bugs": {
        "url": ""
    },
    "repository": {
        "type": "git",
        "url": ""
    },
    "homepage": ""
    
    const vscode = require('vscode');
    
    /**
     * 插件被激活时触发,所有代码总入口
     * @param {*} context 插件上下文
     */
    exports.activate = function(context) {
    	require('./completion')(context); // 自动补全};
    }
    /**
     * 插件被释放时触发
     */
    exports.deactivate = function() {
    };
    
    const vscode = require('vscode');
    const util = require('./util');
    
    /**
     * @param {*} document 
     * @param {*} position 
     * @param {*} token 
     * @param {*} context 
     */
    function provideCompletionItems(document, position, token, context) {
        const projectPath = util.getProjectRootPath(document) // 获取项目路径
        const json = require(`${projectPath}/prompt-config.json`)  // 获取配置文件
        const key = Object.keys(json)
        if (!key || key.length === 0) return
        return key.map(item => {
            let str = ''
            if (json[item]['body'] instanceof Array) {
                json[item]['body'].map(ele => {
                    str += ' ' + ele
                })
            } else {
                str = json[item]['body']
            }
            return {
                label: str, // 提示菜单展示内容
                kind: vscode.CompletionItemKind.Text,
                documentation: json[item]['describe'] // 提示菜单描述内容
            }
        })
    }
    
    /**
     * 光标选中当前自动补全item时触发动作,一般情况下无需处理
     * @param {*} item 
     * @param {*} token 
     */
    function resolveCompletionItem(item, token) {
        return null;
    }
    
    module.exports = function(context) {
        // 注册菜单事件,在html |  vue 文件中触发 。第三个参数还可以设置触发条件
        context.subscriptions.push(vscode.languages.registerCompletionItemProvider('html', {
            provideCompletionItems,
            resolveCompletionItem
        }, '.')); // . 之后触发
        context.subscriptions.push(vscode.languages.registerCompletionItemProvider('vue', {
            provideCompletionItems,
            resolveCompletionItem
        }));
    };
    

    测试通过 F5 进行代码调试

    打包上传

    插件完成之后需要应用

    1. 直接把文件夹发给别人,让别人找到vscode的插件存放目录并放进去,然后重启vscode,一般不推荐;
    2. 打包成vsix插件,然后发送给别人安装,如果你的插件涉及机密不方便发布到应用市场,可以尝试采用这种方式;
    3. 注册开发者账号,发布到官网应用市场,这个发布和npm一样是不需要审核的。

    请参考

    http://blog.haoji.me/vscode-plugin-publish.html

    展开全文
  • 笔记内容:vscode安装python插件笔记日期:2017-12-23vscode创建python文件在介绍如何安装python插件之前,先来看看没有插件的情况下,是否能够在vscode中编辑和执行python文件:1.文件 >> 新建文件,然后就会弹出一...
  • 笔记内容:vscode安装python插件笔记日期:2017-12-23vscode创建python文件在介绍如何安装python插件之前,先来看看没有插件的情况下,是否能够在vscode中编辑和执行python文件:1.文件 >> 新建文件,然后就会弹出一...
  • vscode作为一款好用的轻量级代码编辑器,不仅支持代码调试,而且还有丰富的插件库,可以说是免费好用,对于初学者来说用来写写python是再合适不过了。下面就推荐几款个人觉得还不错的插件,希望可以帮助大家更好的写...
  • 作为一名从业多年的码农,总结一下用过的好用的插件(仅代表个人意见)Auto Close Tag:见名知意,帮您自动书写尾标签,对于前端开发来说绝对是福音,除了提高书写速度,同时也可避免一些由于忘记尾标签产生的bug,...
  • php中文网最新课程每日17点准时技术干货分享14个vscode常用插件1、auto rename tag, html自动更新配对标签名称;2、highlight matching tag,自动...4、path intellisense,智能路径提示;5、markdownlint,优秀的 ...
  • vscode 安装go插件

    千次阅读 2019-05-13 23:18:14
    vscode中安装ms-vscode.go插件后可以开启对go语言的支持,ms-vscode.go插件需要依赖一些工具,安装完成后提示 Installing github.com/nsf/gocode SUCCEEDED Installing github....
  • vscode-扩展插件

    千次阅读 2018-11-03 19:44:48
    title: vscode-扩展插件 categories: VSCode tags: [vscode, 插件, 扩展] date: 2018-10-31 14:44:18 comments: false 因为 vscode 已经是我的主用开发工具, 已经抛弃了 sublime text, vs. 开发 unity, ...
  • 使用命令code --extensions-dir D:\Microsoft VS Code\extensions修改插件路径 回车后重启vscode成功 但是重新安装的插件位置并不在我定义的这个路径D:\Microsoft VS Code\extensions中 反而在D:\Microsoft...
  • 1. Chinese (Simplified) Language Pack for Visual Studio Code简体中文插件2. VSCode Great Icons设置文件图标主题3. Auto Close Tag自动闭合 HTML/XML 标签4.Auto Rename Tag自动完成另一侧标签的同步修改5....
  • VSCodeVSCode配置LeetCode插件

    千次阅读 2021-03-22 09:59:40
    在安装完LeetCode插件之后,会提示你安装Node.js,除了安装路径一路next即可。Node.js在安装完成之后会自动配置环境变量,所以我们无需操心。 4. 登录LeetCode账户 5. 配置文件路径 6. 快乐编程 LeetCode插件提供...
  • vscode作为一款好用的轻量级代码编辑器,不仅支持代码调试,而且还有丰富的插件库,可以说是免费好用,对于初学者来说用来写写python是再合适不过了。下面就推荐几款个人觉得还不错的插件,希望可以帮助大家更好的写...
  • vscode前端常用插件

    2020-04-07 14:45:56
    VSCODE 前端相关插件记录vscode 基本插件Auto Close TagAuto Rename TagBeautifyBracket Pair ColorizerDebugger for ChromeHTML CSS SupportHTML SnippetsJavaScript(ES6) code snippetsjQuery Code Snippetsopen ...
  • macOS下给VScode安装Golang插件

    千次阅读 2019-04-06 13:32:38
    但是在配置好环境之后,vscode提示我安装插件,却一直安装失败,在折腾了好久之后终于算是安装成功了,所以记录一下。 这里不讲具体的Golang和VScode的具体安装过程,需要的可以百度其他博客的讲解。这里直接讲解...
  • vscode中安装ms-vscode.go插件后可以开启对go语言的支持,ms-vscode.go插件需要依赖一些工具,安装完成后提示 Installing github.com/nsf/gocode SUCCEEDED Installing github....
  • VSCode配置SVN插件

    2021-04-28 19:38:04
    vscode插件里也可以直接下载Tortoisesvn插件,不过我没试过。 TortoiseSVN工具下载 vscode插件的配置需要 TortoiseSVN里的一个SVN.exe工具,这个工具默认是没有下载的,所以需要重新运行TortoiseSVN的安装程序。 ...
  • 2、highlight matching tag,自动高亮显示结束括号/标签;3、bracket pair colorizer,为嵌套的...4、path intellisense,智能路径提示;5、markdownlint,优秀的 markdown 语法检查器;6、markdown preview enhance...
  • VSCode超实用插件

    千次阅读 多人点赞 2021-02-22 14:11:52
    基础通用插件 ...HTML 代码片段,该插件可为你提供 html 标签的代码提示,不用键入尖括号了 Bracket Pair Colorizer 该插件可以为你把成对的括号做颜色区分,并且提供一根连接线。方便我们审阅代码结构...
  • 原博文2018-12-02 15:16 −在vscode中点击对应插件的install按钮安装,安装失败,软件提示手动安装(manually install)。 手动下载vsix安装包,然后点击install from VSIX...,选择vsix安装包进行安装,显示Error: ...
  • vscode常用的插件

    2019-08-28 16:19:31
    Vscode自己需要的插件 https://www.cnblogs.com/sexintercourse/p/9521946.html Openinbrowser 只支持将html类型文件,在浏览器自动打开呈现 Option+B通过默认浏览器打开 Shift+option+B选择浏览器打开 ...
  • vscode使用svn插件

    2021-05-06 11:21:15
    首先下载svn svn下载地址 下载svn就傻瓜式安装就...vscode中搜索插件:svn和tortoisesvn安装 在setting.json中配置svn地址"svn.path":"C://Program Files//TortoiseSVN//bin" 之前没改变大多都在这个路径 重启v
  • VSCode 基础必备插件

    2020-04-05 22:42:52
    基础必备插件 1、View In Browser 在浏览器里预览网页必备。 2、vscode-icons 改变编辑器里面的文件图标,个人比较稀饭这个。其他的这里就不说了。 image 3、Bracket Pair Colorizer 给嵌套的各种括号加上...
  • vscode 2020 最新 插件

    2020-09-26 01:54:53
    Path Intellisense 自动补全路径 Bracket Pair Colorizer 这个扩展允许匹配的括号用颜色标识 Chinese (Simplified) 中文插件 className 代码补全 Code Runner 代码一键运行,支持超过40种语言 code se

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,124
精华内容 2,449
关键字:

vscode路径提示插件