精华内容
下载资源
问答
  • Visual Studio Code

    2018-03-09 11:20:35
    Visual Studio CodeVisual Studio CodeVisual Studio Code
  • 主要介绍了在Visual Studio Code环境中使用SVN的方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • visual studio code软件工具安装包,本人用于electron框架相关项目的开发,视图清晰,使用简单方便。类似于subtext 3编辑器的视图。
  • Visual Studio Code 常用插件,包括bootstrap-3,vscode-icons,jquery,JS-CSS-HTML-formatter,aspnet-helper,path-intellisense(路径自动补全),html css
  • 微软最近发布了Visual Studio Code ,我对它的使用有点困惑,因为Visual Studio在功能上与它有很多相似之处。

    本文翻译自:What are the differences between Visual Studio Code and Visual Studio?

    微软最近发布了Visual Studio Code ,我对它的使用有点困惑,因为Visual Studio在功能上与它有很多相似之处。


    #1楼

    参考:https://stackoom.com/question/245bO/Visual-Studio-Code和Visual-Studio有什么区别


    #2楼

    Visual Studio Code is an editor while Visual Studio is an IDE. Visual Studio Code是一个编辑器,而Visual Studio是一个IDE。

    Visual Studio Code is cross-platform and fast, while Visual Studio is Windows/Mac only and not fast. Visual Studio Code是跨平台且快速的,而Visual Studio仅 适用于Windows / Mac而且 速度不快。

    Note that Visual Studio for Mac is available now but is a different product compared to Visual Studio (Windows). 请注意,Visual Studio for Mac现在可用,但与Visual Studio(Windows)相比是一个不同的产品。 It's based on Xamarin Studio and lacks support for some older .NET project types. 它基于Xamarin Studio,并且缺少对一些较旧的.NET项目类型的支持。 It does successfully build solutions created in VS 2017. VS mac has a more limited UI (for example, no customizable toolbar). 它确实成功构建了在VS 2017中创建的解决方案.VS mac具有更有限的UI(例如,没有可自定义的工具栏)。 So for cross-platform work. 所以对于跨平台的工作。 VS Code may still be preferable. VS Code可能仍然是首选。


    #3楼

    Visual Studio (full version) is a "full-featured" and "convenient" development environment. Visual Studio(完整版)是一个“功能齐全”和“方便”的开发环境。

    Visual Studio (free "Express" versions - only until 2017) are feature-centered and simplified versions of the full version. Visual Studio(免费的“Express”版本 - 仅限2017年)是完整版的以功能为中心和简化版本。 Feature-centered meaning that there are different versions (Visual Studio Web Developer, Visual Studio C#, etc.) depending on your goal. 以功能为中心意味着根据您的目标有不同的版本(Visual Studio Web Developer,Visual Studio C#等)。

    Visual Studio (free Community edition - since 2015) is a simplified version of the full version and replaces the separated express editions used before 2015. Visual Studio(免费社区版 - 自2015年起)是完整版的简化版,取代了2015年之前使用的分离版快速版。

    Visual Studio Code (VSCode) is a cross-platform (Linux, Mac OS, Windows) editor that can be extended with plugins to your needs. Visual Studio Code(VSCode)是一个跨平台(Linux,Mac OS,Windows)编辑器,可以使用插件扩展以满足您的需求。

    For example if you want to create an ASP.NET application using VS Code you need to perform several steps on your own to setup the project. 例如,如果要使用VS Code创建ASP.NET应用程序 ,则需要自己执行几个步骤来设置项目。 There is a separate tutorial for each OS. 每个操作系统都有一个单独的教程。


    #4楼

    与之前的答案相辅相成,两者之间的一个重大区别是Visual Studio Code带有一个所谓的“便携式”版本,它不需要在Windows上运行的完全管理权限,并且可以放在可移动驱动器中以方便使用。


    #5楼

    I will provide a detailed differences between Visual Studio and Visual Studio Code below. 我将在下面提供Visual Studio和Visual Studio Code之间的详细差异。

    If you really look at it the most obvious difference is that .NET has been split into two: 如果你真的看到它,最明显的区别是.NET已分为两部分:

    • .NET Core (Mac, Linux, and Windows) .NET Core(Mac,Linux和Windows)
    • .NET Framework (Windows only) .NET Framework(仅限Windows)

    All native user interface technologies ( Windows Presentation Foundation , Windows Forms , etc.) are part of the framework, not the core. 所有本机用户界面技术( Windows Presentation FoundationWindows Forms等)都是框架的一部分,而不是核心。

    The "Visual" in Visual Studio (from Visual Basic) was largely synonymous with visual UI (drag & drop WYSIWYG) design, so in that sense, Visual Studio Code is Visual Studio without the Visual! Visual Studio中的“Visual”(来自Visual Basic)在很大程度上是视觉UI(拖放WYSIWYG)设计的同义词,因此从这个意义上说,Visual Studio Code是没有Visual的Visual Studio!

    The second most obvious difference is that Visual Studio tends to be oriented around projects & solutions. 第二个最明显的区别是Visual Studio倾向于围绕项目和解决方案。

    Visual Studio Code: Visual Studio代码:

    • It's a lightweight source code editor which can be used to view, edit, run, and debug source code for applications. 它是一个轻量级的源代码编辑器,可用于查看,编辑,运行和调试应用程序的源代码。
    • Simply it is Visual Studio without the Visual UI, majorly a superman's text-editor. 简单来说,它是没有Visual UI的Visual Studio,主要是超人的文本编辑器。
    • It is mainly oriented around files, not projects. 它主要面向文件,而不是项目。
    • It does not have any scaffolding support. 它没有任何脚手架支持。
    • It is a competitor of Sublime Text or Atom on Electron . 它是Sublime TextAtom on Electron的竞争对手。
    • It is based on the Electron framework, which is used to build cross platform desktop application using web technologies. 它基于Electron框架,用于使用Web技术构建跨平台桌面应用程序。
    • It does not have support for Microsoft's version control system; 它不支持微软的版本控制系统; Team Foundation Server. Team Foundation Server。
    • It has limited IntelliSense for Microsoft file types and similar features. 它对Microsoft文件类型和类似功能的IntelliSense有限。
    • It is mainly used by developers on a Mac who deal with client-side technologies (HTML, JavaScript, and CSS). 它主要由处理客户端技术(HTML,JavaScript和CSS)的Mac上的开发人员使用。

    Visual Studio: 视觉工作室:

    • As the name indicates, it is an IDE, and it contains all the features required for project development. 顾名思义,它是一个IDE,它包含项目开发所需的所有功能。 Like code auto completion, debugger, database integration, server setup, configurations, and so on. 像代码自动完成,调试器,数据库集成,服务器设置,配置等。
    • It is a complete solution mostly used by and for .NET related developers. 它是.NET相关开发人员主要使用的完整解决方案。 It includes everything from source control to bug tracker to deployment tools, etc. It has everything required to develop. 它包括从源代码控制到错误跟踪器到部署工具等的所有内容。它具有开发所需的一切。
    • It is widely used on .NET related projects (though you can use it for other things). 它广泛用于.NET相关项目(尽管你可以将它用于其他事情)。 The community version is free, but if you want to make most of it then it is not free. 社区版本是免费的,但如果你想完成大部分版本,那么它就不是免费的。
    • Visual Studio is aimed to be the world's best IDE (integrated development environment), which provide full stack develop toolsets, including a powerful code completion component called IntelliSense, a debugger which can debug both source code and machine code, everything about ASP.NET development, and something about SQL development. Visual Studio旨在成为世界上最好的IDE(集成开发环境),它提供完整的堆栈开发工具集,包括一个名为IntelliSense的强大代码完成组件,一个可以调试源代码和机器代码的调试器,关于ASP.NET开发的所有内容关于SQL开发的一些事情。

    • In the latest version of Visual Studio, you can develop cross-platform application without leaving the IDE. 在最新版本的Visual Studio中,您无需离开IDE即可开发跨平台应用程序。 And Visual Studio takes more than 8 GB disk space (according to the components you select). Visual Studio占用的磁盘空间超过8 GB(根据您选择的组件)。

    • In brief, Visual Studio is an ultimate development environment, and it's quite heavy. 简而言之,Visual Studio是一个终极开发环境,它非常繁重。

    Reference: https://www.quora.com/What-is-the-difference-between-Visual-Studio-and-Visual-Studio-Code 参考: https //www.quora.com/What-is-the-difference-between-Visual-Studio-and-Visual-Studio-Code


    #6楼

    Visual Studio Code与命令提示符/终端集成,因此当需要在IDE和终端/命令提示符之间切换时,它将非常方便,例如:连接到Linux。

    展开全文
  • 主要介绍了吐血推荐珍藏的Visual Studio Code插件(推荐),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Visual Studio Code使用介绍

    千次阅读 2020-04-11 17:49:38
    由于我前端的开发的时候通常都是用Visual Studio Code所以在这里就介绍一下Visual Studio Code的使用和配置。 先来说说我为什么选择Visual Studio Code,下面就简称为VSCode,使用VSCode最主要的一个原因是因为他结....

    介绍

    在前端开发中前端的开发工具也有很多例如像Visual Studio Code、sublime_text3、HBuilder等等。由于我前端的开发的时候通常都是用Visual Studio Code所以在这里就介绍一下Visual Studio Code的使用和配置。

    先来说说我为什么选择Visual Studio Code,下面就简称为VSCode,使用VSCode最主要的一个原因是因为他结合EsLint之后,我们写完代码保存的时候他会对代码进行检查,如果发现代码不符合规范那么他可以自动对代码进行修复,这功能是不是简直无敌啊,还有就是他是由Microsoft所研发的并且开源、跨平台、免费的,然后就是在安装中文插件后对中文的支持特别好,因为对中文完全支持所以上手就轻松很多了。而且和其他ide类似如果想要支持其他的功能只需要安装相应的插件就可以了。
    在来看看界面吧
    界面的布局:
    在这里插入图片描述
    实际使用界面:这里使用的主题是One Dark Pro
    在这里插入图片描述

    配置

    设置类型

    设置分为两种,用户设置和工作区设置。

    • 用户设置: 这种方式进行的设置,会应用于该用户打开的所有工程;其实可以理解为全局配置
    • 工作空间设置:工作空间是指使用VS Code打开的某个文件夹,在该文件夹下会创建一个名为.vscode的隐藏文件夹,里面包含着仅适用于当前目录的VS Code的设置,工作空间的设置会覆盖用户的设置。可以理解为局部配置

    每个人都有自己的偏好,在使用VS Code进行开发时,都会根据自己的习惯来对VS Code进行用户级别的配置。
    但是当多人共同完成某个项目的时候,该项目会有一定的编码规范,如: 编辑某个语言时的设置,代码的缩进等等,这个时候就需要对该项目进行单独的工作空间级别的设置。

    修改状态栏颜色

    在默认情况下底部状态栏颜色是真的不忍直视,那么深的紫色和界面格格不入,所以这个对于我而言是必须要改的
    进入文件–>首选项–>设置然后搜索workbench.colorCustomizations,在setting.json中添加项目内容,注意这里为了全局使用应该设置在用户设置里面

    添加内容:

    "workbench.colorCustomizations": {
            "statusBar.background" : "#333333",
            "statusBar.noFolderBackground" : "#343D46",
            "statusBar.debuggingBackground": "#ABB1BA"
    }
    

    例如:

    {
        "workbench.colorTheme": "Mariana (Sublime)",
        "workbench.statusBar.visible": true,
        "diffEditor.ignoreTrimWhitespace": true,
        "workbench.colorCustomizations": {
            "statusBar.background" : "#333333",
            "statusBar.noFolderBackground" : "#343D46",
            "statusBar.debuggingBackground": "#ABB1BA"
        }
    }
    

    自定义代码块

    例如配置vue模板代码块。

    • 使用快捷键Ctrl+Shift+P打开搜索栏–>输入snippet–>选择首选项

    • 打开了snippet搜索栏–>输入vue–>选择vue.json

    • 在打开的vue.json文件中添加模板;

      • {
          	"Print to console": {
                "prefix": "vuetmp",
                "body": [
                    "<template>",
                    "  <div>\n",
                    "  </div>",
                    "</template>\n",
                    "<script>",
                    "export default {",
                    "  data() {",
                    "    return {\n",
                    "    }",
                    "  },",
                    "  methods: {\n",
                    "  },",
                    "  components: {\n",
                    "  }",
                    "}",
                    "</script>\n",
                    "<style>\n",
                    "</style>",
                    "$2"
                ],
                "description": "创建一个自定义的vue组件代码块"
            }
        }
        
    • 定义好之后在vue文件中输入前缀vuetmp,直接选择模板就可以自动生成模板了

    插件

    插件给你一切可能,VSCode之所以好用是因为它里面包含了丰富的插件。下面是一些常用的插件

    • Chinese (Simplified)

      • 中文插件 安装后会将页面改为中文版的,而且对中文支持很好
    • Vetur

      • vue插件 语法高亮、智能感知、Emmet等
    • EsLint

      • 语法纠错,以及自动修复,

      • 使用EsLint需要在项目中添加EsLint的语法检查配置,需要在项目中添加.eslintrc.js文件,.eslintrc.js文件的配置我会在文章后面给出,大家可以根据自己的需要进行修改

      • 开启自动修复,在settings.json文件中添加(建议设置在工作空间级别)

        • {
              "files.autoSave": "off",//关闭自动保存
              "eslint.run": "onSave", //eslint在保存时运行
              "editor.codeActionsOnSave": {
                  "source.fixAll.eslint": true //保存时自动修复
              }
          }
          
    • Debugger for Chrome

      • 在VSCode中结合使用debug的插件
    • 主题插件

      • 常用主题
      • Bimbo
      • One Monokai Theme
      • Mariana
      • One Dark Pro
      • Dracula Official
    • Auto Close Tag

      • 自动闭合HTML/XML标签
    • Auto Rename Tag

      • 自动完成另一侧标签的同步修改
    • JavaScript(ES6) code snippets

      • ES6语法智能提示以及快速输入,除js外还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间
      • 这个安装之后还得自己去看他的快捷操作,可以直接到安装插件哪里搜索然后再主页查看
    • HTML Snippets

      • 智能提示html标签,具体看主页使用,其实就是直接输入标签名他自动给你补全
    • Path Intellisense

      • 自动路劲补全
    • HTML CSS Support

      • 让 html 标签上写class 智能提示当前项目所支持的样式
    • jQuery Code Snippets

      • jquery智能提示,写jquery可以用
    • js-beautify for VS Code

      • 格式化 html ,js,css 。如果使用了ESlint这个基本不需要了
    • Bracket Pair Colorizer

      • 给括号加上不同的颜色,便于区分不同的区块
    • GitLens

    • Markdown Preview Enhanced

      • Markdown 预览编写插件
      • 常用快捷键:
        • ctrl-shift-v 打开预览
        • shift-enter 运行代码块
    • markdownlint

      • markdown 语法纠错

    快捷键

    自定义快捷键

    自定义快捷可以通过:首选项–>键盘快捷键方式 来打开,打开后直接在搜索框输入快捷按钮或者描述关键字进行搜索

    更改的快捷键

    • 触发建议

      • 默认触发建议是Ctrl + space(空格),和输入法冲突
      • 更改为alt + /
    • 保存所有

      • 默认保存所有是Ctrl + k s
      • 把保存书所有设置为Ctrl + Shift + s ,而默认Ctrl + Shift + s为另存为这个并不常用,所以调换快捷键
      • 更改为:Ctrl + Shift + s
    • 行缩进

      • 默认行缩进为Ctrl + [/] 向前或先后缩进。
      • 把向前缩进改为Ctrl + tab,而Ctrl + tab 默认为打开最近打开的文件列表。所以把打开最近打开的文件列表调整为Ctrl + backspace,而Ctrl + backspace默认为终端的删除左侧字符,不过试了一下没有效果,所以把这个改为Ctrl + shift + backspace
      • 更改:行向前缩进 Ctrl + tab,打开最近打开的文件列表 Ctrl + backspace
    • 快速移动到行首和行尾

      • 默认情况下快速移动到行首或行尾绑定的快捷键为home和end,但是电脑没有键盘的时候没有这两个键,所以把他改为Ctrl + [/]
      • 更改: Ctrl + [/] 快速移动到行首或行尾
    • 转换大小写

      • 默认情况下转换大小写是没有快捷键的。搜索transform添加快捷键为大写改为:Ctrl + shift + x,小写改为:Ctrl + shift + y,而这两个默认都有了不过感觉不会常用所以改把之前的改为Ctrl + alt+ x 和 Ctrl + alt+ y
      • 大写:Ctrl + shift + x
      • 小写:Ctrl + shift + y
    • 合并行

      • 默认合并行是没有添加快捷键的,搜索合并然后将合并行的快捷键改为Ctrl + Alt + j
      • 更改为: Ctrl + Alt + j

    编辑类

    • Ctrl + Shift + \
      • 在括号的开头和结尾之间跳转
    • Alt + 单击 或Ctrl + d 按多次
      • 在不同的位置添加光标实现多处编辑,其中Ctrl + d他会在文本中自动搜索当前选中的单词并且在单词后面添加光标从而实现多出编辑
    • Ctrl + shift + space
      • 参数触发建议
    • shift + alt + f
      • 格式化文档,不过有了eslint之后也没有必要了,有了eslint之后保存的时候会自动格式化
    • alt+ u
      • 回到上一个光标位置
    • Alt + <-- (左箭头)/–>(右箭头)
      • alt + 左箭头表示回到上一个编辑位置,alt + 右箭头表示从上一个编辑位置回来
    • Alt + 上箭头/下箭头
      • 上下移动行
    • 删除当前行
      • 默认为Ctrl + Shift + k 不过我们也可以使用Ctrl + x来直接剪切效果也是一样的
    • Shift+alt+向下箭头
      • 快速复制当前行到下一行
    • Shift+alt+向上箭头
      • 快速复制当前行到上一行
    • 复制某一行
      • 将光标移动到某一行上不选中任何数据直接按Ctrl+c就是复制当前行
    • 跳转到函数的定义处
      • 选择函数然后按f12就可以跳转到函数的定义处
    • 参考函数在哪里被引用了
      • 选中函数名,然后按Shift+f12就会显示一个提示框,里面可以查看函数在哪里被引用了

    文件操作类

    • Ctrl + w
      • 关闭当前打开文件
    • 搜索替换
      • 单文件为Ctrl + fCtrl + h,多文件为Ctrl + Shift + fCtrl + Shift + h
    • Ctrl + e 或 Ctrl + p
      • 通过文件名或路径快速打开某个文件

    公共类

    • Ctrl + shift + p
      • 打开命令面板

    因为这个工具对中文的支持很好所以上手也挺简单的,很多功能普通的ide其实没有什么很大的区别例如像git的使用之类的,这里就不多说了,最后附加上ESLint的配置文件
    .eslintrc.js

    module.exports = {
      root: true,
      parserOptions: {
        parser: 'babel-eslint',
        sourceType: 'module'
      },
      env: {
        browser: true,
        node: true,
        es6: true,
      },
      extends: ['plugin:vue/essential', 'eslint:recommended'],
    
      // add your custom rules here
      //it is base on https://github.com/vuejs/eslint-config-vue
      rules: {
        "vue/max-attributes-per-line": [2, {
          "singleline": 10,
          "multiline": {
            "max": 1,
            "allowFirstLine": false
          }
        }],
        "vue/singleline-html-element-content-newline": "off",
        "vue/multiline-html-element-content-newline":"off",
        // "vue/name-property-casing": ["error", "PascalCase"],
        "vue/no-v-html": "off",
        'accessor-pairs': 2,
        'arrow-spacing': [2, {
          'before': true,
          'after': true
        }],
        'block-spacing': [2, 'always'],
        'brace-style': [2, '1tbs', {
          'allowSingleLine': true
        }],
        'camelcase': [0, {
          'properties': 'always'
        }],
        'comma-dangle': [2, 'never'],
        'comma-spacing': [2, {
          'before': false,
          'after': true
        }],
        'comma-style': [2, 'last'],
        'constructor-super': 2,
        'curly': [2, 'multi-line'],
        'dot-location': [2, 'property'],
        'eol-last': 2,
        'eqeqeq': ["error", "always", {"null": "ignore"}],
        'generator-star-spacing': [2, {
          'before': true,
          'after': true
        }],
        'handle-callback-err': [2, '^(err|error)$'],
        'indent': [2, 2, {
          'SwitchCase': 1
        }],
        'jsx-quotes': [2, 'prefer-single'],
        'key-spacing': [2, {
          'beforeColon': false,
          'afterColon': true
        }],
        'keyword-spacing': [2, {
          'before': true,
          'after': true
        }],
        'new-cap': [2, {
          'newIsCap': true,
          'capIsNew': false
        }],
        'new-parens': 2,
        'no-array-constructor': 2,
        'no-caller': 2,
        'no-console': 'off',
        'no-class-assign': 2,
        'no-cond-assign': 2,
        'no-const-assign': 2,
        'no-control-regex': 0,
        'no-delete-var': 2,
        'no-dupe-args': 2,
        'no-dupe-class-members': 2,
        'no-dupe-keys': 2,
        'no-duplicate-case': 2,
        'no-empty-character-class': 2,
        'no-empty-pattern': 2,
        'no-eval': 2,
        'no-ex-assign': 2,
        'no-extend-native': 2,
        'no-extra-bind': 2,
        'no-extra-boolean-cast': 2,
        'no-extra-parens': [2, 'functions'],
        'no-fallthrough': 2,
        'no-floating-decimal': 2,
        'no-func-assign': 2,
        'no-implied-eval': 2,
        'no-inner-declarations': [2, 'functions'],
        'no-invalid-regexp': 2,
        'no-irregular-whitespace': 2,
        'no-iterator': 2,
        'no-label-var': 2,
        'no-labels': [2, {
          'allowLoop': false,
          'allowSwitch': false
        }],
        'no-lone-blocks': 2,
        'no-mixed-spaces-and-tabs': 2,
        'no-multi-spaces': 2,
        'no-multi-str': 2,
        'no-multiple-empty-lines': [2, {
          'max': 1
        }],
        'no-native-reassign': 2,
        'no-negated-in-lhs': 2,
        'no-new-object': 2,
        'no-new-require': 2,
        'no-new-symbol': 2,
        'no-new-wrappers': 2,
        'no-obj-calls': 2,
        'no-octal': 2,
        'no-octal-escape': 2,
        'no-path-concat': 2,
        'no-proto': 2,
        'no-redeclare': 2,
        'no-regex-spaces': 2,
        'no-return-assign': [2, 'except-parens'],
        'no-self-assign': 2,
        'no-self-compare': 2,
        'no-sequences': 2,
        'no-shadow-restricted-names': 2,
        'no-spaced-func': 2,
        'no-sparse-arrays': 2,
        'no-this-before-super': 2,
        'no-throw-literal': 2,
        'no-trailing-spaces': 2,
        'no-undef': 2,
        'no-undef-init': 2,
        'no-unexpected-multiline': 2,
        'no-unmodified-loop-condition': 2,
        'no-unneeded-ternary': [2, {
          'defaultAssignment': false
        }],
        'no-unreachable': 2,
        'no-unsafe-finally': 2,
        'no-unused-vars': [2, {
          'vars': 'all',
          'args': 'none'
        }],
        'no-useless-call': 2,
        'no-useless-computed-key': 2,
        'no-useless-constructor': 2,
        'no-useless-escape': 0,
        'no-whitespace-before-property': 2,
        'no-with': 2,
        'one-var': [2, {
          'initialized': 'never'
        }],
        'operator-linebreak': [2, 'after', {
          'overrides': {
            '?': 'before',
            ':': 'before'
          }
        }],
        'padded-blocks': [2, 'never'],
        'quotes': [2, 'single', {
          'avoidEscape': true,
          'allowTemplateLiterals': true
        }],
        'semi': [2, 'never'],
        'semi-spacing': [2, {
          'before': false,
          'after': true
        }],
        'space-before-blocks': [2, 'always'],
        'space-before-function-paren': [2, 'never'],
        'space-in-parens': [2, 'never'],
        'space-infix-ops': 2,
        'space-unary-ops': [2, {
          'words': true,
          'nonwords': false
        }],
        'spaced-comment': [2, 'always', {
          'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
        }],
        'template-curly-spacing': [2, 'never'],
        'use-isnan': 2,
        'valid-typeof': 2,
        'wrap-iife': [2, 'any'],
        'yield-star-spacing': [2, 'both'],
        'yoda': [2, 'never'],
        'prefer-const': 2,
        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
        'object-curly-spacing': [2, 'always', {
          objectsInObjects: false
        }],
        'array-bracket-spacing': [2, 'never']
      }
    }
    
    
    展开全文
  • 学校(fzu)布置的作业,使用C#完全自己手写的成绩管理系统(控制台程序)。(主要文件就里面的一个cs文件哈)
  • 下载该文件后,直接解压到本地,运行其.exe文件即可。
  • Visual Studio Code 使用介绍

    万次阅读 多人点赞 2020-01-20 13:12:55
    今天跟大家分享Visual Studio Code 使用介绍的知识。 1 下载安装 官网下载:https://code.visualstudio.com/ 汉化中文(官方下载默认为英文,英文好的小伙伴可直接跳过这步) 点击插件按钮搜索 Chinese, 在弹出的...

    今天跟大家分享Visual Studio Code 使用介绍的知识。

    1 下载安装

    官网下载:https://code.visualstudio.com/

    汉化中文(官方下载默认为英文,英文好的小伙伴可直接跳过这步)

    点击插件按钮搜索 Chinese, 在弹出的选项中选择第一个中文简体
    在这里插入图片描述
    然后右边会弹出如下图安装界面,接着点击 Install 安装
    在这里插入图片描述
    安装完毕后会有如下提示(主要提醒你安装完中文简体汉化包后一定要重启方可生效)
    在这里插入图片描述
    Vscode界面介绍(主要分为5个区域,分别是活动栏,侧边栏,编辑栏,面板栏,状态栏)
    在这里插入图片描述
    ①:活动栏从上到下依次为,打开侧边栏,搜索,使用git,debug,使用插件

    ②:侧边栏,新建项目文件和文件夹

    ③:编辑栏,编写代码的区域

    ④:面板栏,从左到右依次为,问题,输出,调试栏,终端(terminal),最重要的是terminal,用来输入相关命令
    在这里插入图片描述
    ⑤:状态栏,点击 [图片上传失败…(image-bcdf98-1559059441856)].png)[图片上传失败…(image-a50ab7-1559059441856)] 该区域可以调出面板栏

    ⑥:需要注意的为下图红框所示,分别表示鼠标光标所在位置和tab缩进字符,这里为缩进4个字符
    在这里插入图片描述
    新建文件和文件夹

    新建文件:Ctrl+N新建文件并修改后缀即可(后缀根据所需文件来,比如.html,.css,.js等)

    新建文件夹

    ①:首先根据需要指定一个路径(这里路径以桌面为例),然后新建一个文件夹(这里新建的文件夹为demo1)

    ②:鼠标点击侧边栏第二个选项,如下图
    在这里插入图片描述
    ③:此时会提示你没有可以打开的文件夹,点击Open Folder按钮导入桌面新建的文件夹demo1
    在这里插入图片描述
    ④:把文件夹导入后发现刚刚新建文件夹名字是小写的,现在变大写了,这个不影响,不用太在意
    在这里插入图片描述
    (右边图标从左到右为,新建文件 / 新建文件夹 / 刷新 / 折叠文件)

    注:新建文件一定要修改后缀,否则默认都是text文本文件

    自动保存设置

    File(文件)- Preferences(首选项)- Setting (设置)然后弹出下面界面,选择User(一般会默认选中该选项),接着如下图选择afterdelay选项即可,下面有个数字1000表示1秒,这个可自行设置,表示多少秒以后自动保存
    在这里插入图片描述
    自动格式化代码

    File(文件)- Preferences(首选项)- Setting (设置)

    User(用户)- Text-Editor(文本编辑)- Formatng(格式化)

    然后勾选下图红色框中的选项后重启Vscode即可
    在这里插入图片描述
    Vscode更换主题

    File(文件)- Preferences(首选项)- Color-Theme (颜色主题)
    在这里插入图片描述
    然后会出现下图红色框的界面,此时按键盘上的上下键即可实时查看主题颜色,直接回车可选中对应主题
    在这里插入图片描述
    注:可以点击插件直接搜索 theme 下载其它非内置主题

    快捷键(只列出了很小一部分常用快捷键)

    Ctrl + / (单行注释)

    Shift + Alt + A (多行注释)

    若要取消单行或多行注释在按一次该快捷键即可

    Ctrl + Shift + Enter (上方插入一行,鼠标光标在当前行的任意位置都可以直接换行到上一行)

    Ctrl + Enter (下方插入一行,鼠标光标在当前行的任意位置都可以直接换行到下一行)

    Alt + Shift + F (格式化代码,不需要全选中代码,直接格式化即可)

    Ctrl + Shift + F (查找文件)

    点击设置选择 keyboard shortcuts,右边会弹出所有快捷键目录
    在这里插入图片描述

    2 插件安装

    方法一:
    按F1或Ctrl+Shift+p,输入extensions,点击第一个就可以
    在这里插入图片描述
    方法二:
    ctrl + P 然后输入 >ext install
    在这里插入图片描述
    方法三:
    点击图中位置
    在这里插入图片描述

    3 插件合集

    插件官网:https://marketplace.visualstudio.com/

    每一个插件名都超链接到官网,注意查看

    a.配置类插件:
    1.Settings Sync
    最好用的插件,没有之一,一台电脑配置好之后,其它的几台电脑都不用配置。新机器登录一下就搞定了。再也不用折腾环境了,使用GitHub Gist同步多台计算机上的设置,代码段,主题,文件图标,启动,键绑定,工作区和扩展。
    在这里插入图片描述
    2.Debugger for Chrome
    从VS Code调试在Google Chrome中运行的JavaScript代码。
    用于在Google Chrome浏览器或支持Chrome DevTools协议的其他目标中调试JavaScript代码的VS Code扩展。
    在这里插入图片描述
    3.beautify
    格式化代码工具
    美化javascript,JSON,CSS,Sass,和HTML在Visual Studio代码。
    在这里插入图片描述
    4.Atuo Rename Tag
    修改 html 标签,自动帮你完成头部和尾部闭合标签的同步修改
    在这里插入图片描述
    5.中文(简体)语言包
    Chinese (Simplified) Language Pack for Visual Studio Code
    将界面转换为中文,对英语不好的人,非常友好。例如我。。。
    在这里插入图片描述
    6.Code Spell Checker
    代码拼写检查器
    一个与camelCase代码配合良好的基本拼写检查程序。
    此拼写检查程序的目标是帮助捕获常见的拼写错误,同时保持误报数量较低。
    在这里插入图片描述
    7.vscode-icons
    显示Visual Studio代码的图标,目前该插件已被vscode内部支持:“文件” -> “首选项” -> “文件图标主题”
    在这里插入图片描述
    8.guides
    显示代码对齐辅助线,很好用
    在这里插入图片描述
    9.Rainbow Brackets
    为圆括号,方括号和大括号提供彩虹色。这对于Lisp或Clojure程序员,当然还有JavaScript和其他程序员特别有用。
    效果如下:
    在这里插入图片描述
    10.Bracket Pair Colorizer
    用于着色匹配括号
    在这里插入图片描述
    11.Indent-Rainbow
    用四种不同颜色交替着色文本前面的缩进
    在这里插入图片描述
    12.filesize
    在状态栏中显示当前文件大小,点击后还可以看到详细创建、修改时间
    在这里插入图片描述
    13.Import Cost
    对引入的计算大小
    在这里插入图片描述
    14.Path Intellisense
    可自动填充文件名
    在这里插入图片描述
    15.WakaTime
    从您的编程活动自动生成的度量标准,见解和时间跟踪
    在这里插入图片描述
    16.GitLens
    git日志查看插件
    GitLens 增强了 Visual Studio Code 中内置的 Git 功能。例如 commits 搜索,历史记录和和查看代码作者身份,还能通过强大的比较命令获得有价值的见解等等
    在这里插入图片描述
    17.REST Client
    REST客户端允许您直接发送HTTP请求并在Visual Studio Code中查看响应
    在这里插入图片描述
    18.Npm Intellisense
    用于在 import 语句中自动填充 npm 模块
    require 时的包提示(最新版的vscode已经集成此功能)
    在这里插入图片描述
    19.Azure Storage
    VS Code的Azure存储扩展允许您部署静态网站并浏览Azure Blob容器,文件共享,表和队列。按照本教程从VS Code部署Web应用程序到Azure存储
    在这里插入图片描述
    20.Project Manager
    它可以帮助您轻松访问项目,无论它们位于何处。不要再错过那些重要的项目了。您可以定义自己的收藏项目,或选择自动检测VSCode项目,Git,Mercurial和SVN存储库或任何文件夹。
    从版本8开始,您就有了专门的项目活动栏!
    以下是Project Manager提供的一些功能:
    将任何项目保存为收藏夹
    自动检测VSCode,GIT中,水银或SVN存放区
    在相同或新窗口中打开项目
    识别已删除/重命名的项目
    一个状态栏标识当前项目
    专门的活动栏
    在这里插入图片描述
    21.Language Support for Java™ by Red Hatredhat.java
    这个插件,这个下载次数,安装就对了
    在这里插入图片描述
    22.Todo Tree
    此扩展可以快速搜索(使用ripgrep)您的工作区以获取TODO和FIXME等注释标记,并在资源管理器窗格的树视图中显示它们。单击树中的TODO将打开文件并将光标放在包含TODO的行上。
    找到的TODO也可以在打开的文件中突出显示。
    在这里插入图片描述
    b.VS code 主题集合
    1.Night Owl
    一个非常适合夜猫子的 VS Code 主题。像是为喜欢深夜编码的人精心设计的。
    在这里插入图片描述
    2.Atom One Dark Theme
    一个基于Atom的黑暗主题
    在这里插入图片描述
    3.Dracula Official
    官方吸血鬼主题,博主用的就是这款,很漂亮
    在这里插入图片描述
    4.One Dark Pro
    Atom标志性的One Dark主题,也是VS Code下载次数最多的主题之一!
    在这里插入图片描述
    5.Bimbo
    简约而现代的神奇海洋主题
    在这里插入图片描述
    c.代码提示提示类
    1.HTML Snippets
    完整的HTML代码提示,包括HTML5
    在这里插入图片描述
    2.HTML CSS Support
    在 html 标签上写class 智能提示css样式
    在这里插入图片描述
    3.jQuery Code Snippets
    jQuery代码提示
    超过130个用于JavaScript代码的jQuery代码片段。
    只需键入字母’jq’即可获得所有可用jQuery代码片段的列表。
    在这里插入图片描述
    4.HTMLHint
    html代码检测,支持html5
    在这里插入图片描述
    d.语言相关
    1.C#
    适用于.NET Core的轻量级开发工具。
    伟大的C#编辑支持,包括语法突出显示,智能感知,转到定义,查找所有引用等。
    调试支持.NET Core(CoreCLR)。注意:不支持单声道调试。桌面CLR调试支持有限。
    支持Windows,macOS和Linux上的project.json和csproj项目。

    2.CodeMetrics
    计算TypeScript / JavaScript文件的复杂性。

    3.VUE插件
    vetur 语法高亮、智能感知、Emmet、vue提示等
    在这里插入图片描述
    VueHelper snippet代码片段
    ESLint 将ESLint JavaScript集成到VS代码中。代码规范提示
    在这里插入图片描述
    prettier 代码规范性插件

    4. Java Extension Pack
    它是一组流行的扩展,可以帮助在Visual Studio Code中编写,测试和调试Java应用程序。查看VS Code中的Java以开始使用。
    在这里插入图片描述
    关于Visual Studio Code 使用介绍,你学会了多少?欢迎在留言区评论!

    展开全文
  • Visual Studio Code2020最新版,VSCode基本上可以说是所有编辑器中最轻量级的了,但是它有非常强大的插件库,可以完成java,C/C++,web等开发,颜值也是杠杠的。 Visual Studio Code(简称VS Code)是一个由微软开发...
  • 主要介绍了解决Visual Studio Code运行程序时输出中文成乱码问题,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 本文主要介绍Visual Studio Code一些简单操作,界面介绍,以及常用快捷键使用。 目录 命令控制台 快捷键操作 默认快捷键 所有快捷键 快速打开文件 更改语言模式 自定义 改变你的主题 更改键盘快捷键 ...

    本文主要介绍Visual Studio Code一些简单操作,界面介绍,以及常用快捷键使用。

    目录

    命令控制台

    快捷键操作

    默认快捷键

    所有快捷键

    快速打开文件

    更改语言模式

    自定义

    改变你的主题

    更改键盘快捷键

    扩展

    查找扩展程序

    安装扩展

    文件和文件夹

    集成终端

    自动保存

    切换补充工具栏

    禅模式

    并排编辑

    在编辑器之间切换

    移至资源管理器窗口

    创建或打开文件

    关闭当前打开的文件夹

    导航历史

    总结


    命令控制台

    按下 F1 或者 Ctrl+Shift+P 打开 显示命令控制台(Show Command Palette)。

    根据您当前的上下文访问所有可用命令。

    快捷键操作

    默认快捷键

    当你 打开 命定控制台的时候 后面显示的 便是 快捷键操作

    所有快捷键

    当然你也可以 在 欢迎页面,或者 在帮助-键盘快捷方式参考中 查看所有快捷键

    快速打开文件

    快速打开文件。

    键盘快捷键:Ctrl + P.

    提示:键入查看帮助建议。

    更改语言模式

    键盘快捷键:Ctrl + K 然后在按下M

    然后选择 相关的语言:

    自定义

    您可以执行许多操作来自定义VS代码。

    • 改变你的主题
    • 更改键盘快捷键

    改变你的主题

    键盘快捷键:Ctrl + K Ctrl + T.

    按下 Ctrl+K 之后 在按下 Ctrl+T。

    您可以从VS Code扩展Marketplace安装更多主题。

    当然你也可以选择 安装其他颜色主题,比如我这款 Monokai:

    此外,您可以安装和更改文件图标主题。

    搜索 file icon

    更改键盘快捷键

    自定义键盘快捷键

    键盘快捷键:Ctrl + K Ctrl + S.

    双击 键绑定,然后 在按下 想设置的 快捷键。

    不过,我也是第一次 见到 还有 双模式的快捷键,就是说 按下 Ctrl+1然后 再按下 Ctrl+2 这种玩意,还有居然, 按完 Ctrl+1 再按2 这种玩意,我去。

    扩展

    键盘快捷键:Ctrl + Shift + X.

    查找扩展程序

    1. 在VS Code Marketplace中
    2. 在“ 扩展”视图中的VS代码中搜索。
    3. 查看扩展建议
    4. 社区策划的扩展名列表,例如awesome-vscode

    安装扩展

    在“ 扩展”视图中,您可以通过搜索栏进行搜索

    也可以单击“ 更多操作(...)”按钮按安装计数进行筛选和排序。

    文件和文件夹

    集成终端

    键盘快捷键:Ctrl +` 也就是 全键盘 数字1 前面的那个符号。

    默认 是 powershell,可以 自定义修改 为 cmd。

    自动保存

    settings.json使用Ctrl +,打开用户设置

    "files.autoSave": "afterDelay"
    

    您还可以使用文件 > 自动保存从顶级菜单切换自动保存

    切换补充工具栏

    键盘快捷键:Ctrl + B.

    二次点击可以隐藏 工具栏。

    禅模式

    也就是 全屏模式,长的 像 win10没毛病。

    键盘快捷键:Ctrl + KZ  同时按下Crtl+K然后 松手再次 按 Z

    然后

    进入无分心的 全屏模式。

    按两次Esc退出 全屏模式。

    并排编辑

    键盘快捷键:Ctrl + \

    您还可以拖放编辑器以创建新的编辑器组并在组之间移动编辑器。

    在编辑器之间切换

    键盘快捷键:Ctrl + 1Ctrl + 2Ctrl + 3

    这个  和 谷歌浏览器 相似的一比,差不多 所有窗口模式 都是这么操作。

    移至资源管理器窗口

    键盘快捷键:Ctrl + Shift + E.

    类似于 快速 定位 文件 位置,在资源管理器窗口中。

    创建或打开文件

    键盘快捷键:Ctrl +单击

    类似于  idea中 进入 引用方法。

    您可以通过将光标移动到文件链接并使用Ctrl +单击快速打开文件或图像或创建新文件。

    关闭当前打开的文件夹

    键盘快捷键:Ctrl + F4 与 Ctrl+W 同理

    导航历史

    导航整个历史记录:Ctrl + Tab

    向后导航:Alt + Left

    向前导航:Alt + Right

    总结

    工欲善其事必先利其器,以后再有补充会继续修改,如有错误望支持。

    参考文献:

    官方网站:https://code.visualstudio.com/docs/getstarted/tips-and-tricks

    展开全文
  • 主要介绍Visual Studio Code安装和配置,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 本文给大家介绍的是Visual StudioVisual Studio Code之间有什么区别,希望对大家的学习能够有所帮助
  • 主要介绍visual studio code 如何编译运行html css js文件,本文通过图文实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • Visual Studio Code下载安装教程

    万次阅读 多人点赞 2021-01-01 17:15:32
    Visual Studio Code下载安装教程 1.下载Visual Studio Code安装包,官网https://code.visualstudio.com 2.安装 功能快捷键 撤销:Ctrl/Command + Z 重做:Ctrl/Command + Y 加粗:Ctrl/Command + B 斜体:Ctrl/...
  • Visual Studio Code 入门教程

    万次阅读 多人点赞 2019-02-12 09:22:16
    当然是Visual Studio Code啦!她是微软公司的,你说呢?而且她是免费的! Extensible and customizable.(可扩展的和可定制的,这是我喜欢它的原因) Want even more features? Install extensions to add new ...
  • visual studio code 32位

    2017-11-21 10:41:49
    visual studio code 32 位编程工具,可以扩展一些插件适用于前端Vue开发
  • 该插件在Visual studio code使用,可以让kl文件中关键字高亮。
  • Visual Studio(简称VS)是美国微软公司的开发工具包系列产品,是一个基本完整的开发工具集,它包括了整个软件生命周期中所需要的大部分工具,如UML工具、代码管控工具、集成开发环境(IDE)等。通俗的讲,是一款...
  • Visual Studio Code使用教程

    万次阅读 多人点赞 2019-05-06 10:52:39
    Visual Studio Code是一款轻量级的文档编辑器和资源管理工具,笔者之前一直使用Notepad++作为Shell脚本的编辑器,但是存在一个痛点...本文从Visual Studio Code的下载安装、插件、快捷键、工作区等方面逐一介绍。 ...
  • Visual StudioVisual Studio Code的区别?

    千次阅读 2019-11-20 13:30:59
    Visual Studio 是一个全能的,方便的开发环境。即 IDE。 Visual Studio Code( VSCode )只是一个跨平台的编辑器,但是用户... 因此也可以说 VS Code is code editor like Visual Studio without the Visual! 相对来...
  • Visual Studio Code Succinctly Published on : Apr 29, 2016 Description Visual Studio Code is a powerful tool for editing code and serves as a complete environment for end-to-end programming. ...
  • Visual StudioVisual Studio Code 的区别

    万次阅读 多人点赞 2019-06-04 17:08:24
    Visual Studio是一个集成的开发环境,相对来说比较完整,它包括了整个软件生命周期中所需要的大部分工具,如UML工具、代码管控工具、集成开发环境(IDE)等等。 Visual Studio Code是一款免费开源的现代化轻量级代码...
  • 最近接触了Visual Studio Code,之前没接触过啊,那它与 Visual Studio又有什么区别呢? 这种问题还是百度吧! https://zhidao.baidu.com/question/693962620594591724.html 看了之后,至少会有一个简单的区别...
  • 很多IDE,比如Eclipse和Visual Studio Code的auto completion的Intellisense快捷键都是Ctrl + Space,正好和国内开发者切换中英文输入法的案件冲突了,很烦人。 Visual Studio Code里切换Intellisense快捷键定义的...
  • Visual Studio Code Distilled

    2019-04-08 09:01:46
    Visual Studio Code Distilled Visual Studio Code Distilled
  • Visual Studio Code使用详解

    千次阅读 2018-09-30 10:16:28
    Visual Studio Code是个牛逼的编辑器,启动非常快,完全可以用来代替其他文本文件编辑工具。又可以用来做开发,支持各种语言,相比其他IDE,轻量级完全可配置还集成Git感觉非常的适合前端开发,是微软亲生的想必...
  • Visual Studio 2017和Visual Studio Code的区别! 1.Visual Studio 2017 (1)是一个IDE,它包含项目开发所需的所有功能。像代码自动完成,调试器,数据库集成,服务器设置和配置等。 (2)它是.NET相关开发人员...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 137,325
精华内容 54,930
关键字:

code软件介绍studiovisual