关于vscode一些配置(代码片段)

关键词：

一。 基本操作

1.创建完项目， code .   直接在vscode 中打开

 2.设置--首选项  检测 package.json 文件   点击serve 是可以运行

 3.常用的vscode 插件

 4. 左侧项目文件控制显示隐藏

　　查看--命令面板

 5. 配置代码片段

　　首选项--用户代码片段 -ts 版本

//vue.json  ts-版本
  "Vue Template":
        "prefix":"vueTemplate",
        "body":[
            "<template>
	<div>

	</div>
</template>

",
            "<script lang="ts">
importComponent,Vuefrom ‘vue-property-decorator‘;

@Component
export default class $1:ClassName extends Vue
$0

</script>

",
            "<style lang="stylus" scope>

</style>"
        ],
        "description":"生成ts-vue文件"
    

    "Vue Ts":
        "prefix":"VueTs",
        "body": [
            "<template>",
            " <div>",
            "  $2 ",
            " </div>",
            "</template>",
            "<script lang="ts">",
            "import Component,Vue from ‘vue-property-decorator‘;",
            "@Component",
            "export default class $1:ClassName extends Vue ",
            " ",
            "",
            "</script>",
            "<style lang="stylus" scoped>",
            " ",
            "</style>"
        ]
    

扩展

// css.json

  "Print to cssNote": 
    "prefix": "cssNote",
    "body": [
      "/*",
      " *@description: $1",
      " *@author: wuxuan",
      " *@date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
      "*/"
    ],
    "description": "css注释"
  

// vue.json js-版本

  "Print to vueTemplate": 
    "prefix": "vueTemplate",
    "body": [
      "<template>",
      "  <div>",
      "    $3",
      "  </div>",
      "</template>",
      "<script>",
      "export default ",
      "  name:‘$1‘,",
      "  data()",
      "    return ",
      "       $2",
      "    ",
      "  ",
      "",
      "</script>",
      "<style scoped lang=‘less‘>",
      "</style>"
    ],
    "description": "vue 模板"
  

参考官网：https://code.visualstudio.com/docs/editor/userdefinedsnippets

1）变量

TM_SELECTED_TEXT  当前选择的文本或空字符串
TM_CURRENT_LINE   当前行的内容
TM_CURRENT_WORD   光标下的单词内容或空字符串
TM_LINE_INDEX     基于零索引的行号
TM_LINE_NUMBER    基于一索引的行号
TM_FILENAME       当前文档的文件名
TM_FILENAME_BASE  当前文档的文件名，不带扩展名
TM_DIRECTORY      当前文件的目录
TM_FILEPATH       当前文档的完整文件路径
CLIPBOARD         剪贴板中的内容
WORKSPACE_NAME    打开的工作空间或文件夹的名称

2）当前日期和时间

CURRENT_YEAR               本年度
CURRENT_YEAR_SHORT         本年度的后两位数字
CURRENT_MONTH              以两位数表示的月份（例如“ 02”）
CURRENT_MONTH_NAME         月的全名（例如“七月”）
CURRENT_MONTH_NAME_SHORT   月的简称（例如“ Jul”）
CURRENT_DATE               一个月中的某天
CURRENT_DAY_NAME           一天的名称（例如“周一”）
CURRENT_DAY_NAME_SHORT     一天的简称（例如“ Mon”）
CURRENT_HOUR               当前小时（24小时制）
CURRENT_MINUTE             当前分钟
CURRENT_SECOND             当前秒
CURRENT_SECONDS_UNIX       自Unix时代以来的秒数

3）要插入行或块注释

BLOCK_COMMENT_START       输出示例：用PHP /*或HTML<!--
BLOCK_COMMENT_END         输出示例：用PHP */或HTML-->
LINE_COMMENT              示例输出：在PHP中 //

vscode安装一些快捷配置(代码片段)

VisualStudioCode最好的功能、插件和设置发表于 2017年09月14日 by 愚人码头 被浏览65,689次 分享到： 4小编推荐：掘金是一个高质量的技术社区，从ECMAScript6到Vue.js，性能优化到开源类库，让你不错过前端开发的... 查看详情

vscode配置markdown代码片段(代码片段)

vscode真的是一款特别好用的编辑器不过有时候在写东西时快捷键提示会有一些不足，在vscode中写markdown时还是比较明显的。这里就需要自己在代码片段中进行配置了在左上角打开文件-->首选项-->用户片段找到markdown.json在m... 查看详情

vscode配置git随记(代码片段)

VSCode配置Git随记2018年05月29日10:14:24 Dominic- 阅读数：4096  vscode中对git进行了集成，很多操作只需点击就能操作，无需写一些git指令。不过这就需要你对vscode进行配置。下面我会讲到git的配置与免密码上传github。一... 查看详情

vscode必备配置(代码片段)

目录1.自动化注释工具2.代码格式化与错误检查3.关于有时候无法查看代码定义vscode使用的是有一定要注意：不要有中文路径，不要有中文路径，不要有中文路径！！！1.自动化注释工具我用过的比较不错的... 查看详情

编辑器插件和一些工具汇总(代码片段)

...亮看着非常舒适也就一直用了。后来，看到了网上很多有关于VSCode的文章，VSCode由微软出品，而且支持跨平台，插件丰富。所以自己也去体验了一番，使用下来感觉实在太棒了！??阅读原文地址美化类插件?vscode-iconsBringiconstoyour&n... 查看详情

go语言ide之vscode配置使用(代码片段)

...，支持JetBrains的插件体系。官方:https://www.jetbrains.com/go/。关于Goland相关配置参考该链接即可。Goland用的好好的，为啥突然想用到VSCode呢？VSCode是目前比较流行的IDE工具，在功能方面也相对齐全，使用方 查看详情

vscode配置c/c++环境(代码片段)

VSCode配置C/C++环境介绍下载MinGW编译器安装配置VSCode配置c/c++下载c/c++插件配置编写C/C++程序并运行后续介绍工欲善其事，必先利其器。想要优雅且高效的编写代码，必须熟练使用一些开发工具。但... 查看详情

vscode格式化eslint方法(代码片段)

....eslintrc.js 文件，用于校验代码，编写eslint相关规则，关于eslint的一些具体规则，请查看eslint文档下面列一下我们项目中常用的eslint规则：1module.exports=2root:true,3parser:‘babel-eslint‘,4parserOptions:5sourceType:‘module‘,6"allowImportExportE... 查看详情

关于配置sshd的一些操作(代码片段)

关于服务器自动化配置的一些操作自动化配置服务器，其本质就是开机自动运行脚本开机自动运行脚本的思路1.以某一用户身份去登陆服务器，在linux系统下会默认运行用户家目录下的.bashrc配置文件2.linux或unix系统下，... 查看详情

关于配置sshd的一些操作(代码片段)

关于服务器自动化配置的一些操作自动化配置服务器，其本质就是开机自动运行脚本开机自动运行脚本的思路1.以某一用户身份去登陆服务器，在linux系统下会默认运行用户家目录下的.bashrc配置文件2.linux或unix系统下，... 查看详情

vscode配置markdown代码片段(代码片段)

vscode真的是一款特别好用的编辑器不过有时候在写东西时快捷键提示会有一些不足，在vscode中写markdown时还是比较明显的。这里就需要自己在代码片段中进行配置了在左上角打开文件-->首选项-->用户片段找到markdown.json在m... 查看详情

vscode源码分析之布局(代码片段)

关于VsCode源码编译运行，请参考这篇文章:VsCode源码编译运行当然了，也可以参考官方文档(所以这里就不再赘述):https://github.com/Microsoft/vscode/wiki/How-to-Contribute#build-and-run今天主要分享的是关于VsCode源码修改之布局。如图所示(图画... 查看详情

团队协作统一vue代码风格，vscode做vue项目时的一些配置(代码片段)

1.安装Vetur扩展主要是用于让vscode能识别vue文件，对vue代码进行高丽处理，并且它内置了一些代码格式化的设置2.安装ESLint如果你的项目已经开启了eslint规范,再有多余的空格,或者空行，会有红色波浪线提示。但是光有提示还不够... 查看详情

vscode调试代码快速上手必备知识(代码片段)

...后就可以调试（运行）你写的javascript程序来。二、使用VScode调试代码的一些常识，launch.json文件的一些属性说明以及一些用法说明（详细文档见：https://code.visualstudio.com/docs/editor/debugging#_launch-configurations）1、基本常识　　首先创... 查看详情

安装并在vscode中配置codefira(代码片段)

安装并在VSCode中配置CodeFiraCodeFira是一个monospace（等距）的字体，应用范围在英文及代码上，我个人比较喜欢的是它对于一些字符的处理，如：最主要的就是看得开心啦……CodeFira在Github上有下载地址：h... 查看详情

安装并在vscode中配置codefira(代码片段)

安装并在VSCode中配置CodeFiraCodeFira是一个monospace（等距）的字体，应用范围在英文及代码上，我个人比较喜欢的是它对于一些字符的处理，如：最主要的就是看得开心啦……CodeFira在Github上有下载地址：h... 查看详情

安装并在vscode中配置codefira(代码片段)

安装并在VSCode中配置CodeFiraCodeFira是一个monospace（等距）的字体，应用范围在英文及代码上，我个人比较喜欢的是它对于一些字符的处理，如：最主要的就是看得开心啦……CodeFira在Github上有下载地址：h... 查看详情

第一次使用vscode时你应该知道的一切配置(代码片段)

前言本文首发于博客园。最新内容将在GitHub上实时更新。VSCode本来是前端人员专用，但由于它实在是太好用了，于是，各种开发方向的码农也正在用VSCode作为他们的主力编程工具。甚至是一些写作的同学，也把VSCode作为markdown写... 查看详情