当前位置:首页>引流推广>代码编辑器哪个好用(电脑程序编程入门代码)

代码编辑器哪个好用(电脑程序编程入门代码)

概述 VisualStudioCode(简称VSCode/VSC)是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比Diff、GIT等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平台支持Win、Mac以及Linux。 vscode官网:https://code.visualstudio.com/ ...

概述

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux。

vscode 官网:
https://code.visualstudio.com/


1、下载VSCode

打开浏览器输入
https://code.visualstudio.com/(进入到官网),点击下载,可以根据自己的操作系统进行下载。

下载地址:
https://vscode.cdn.azure.cn/stable/e5a624b788d92b8d34d1392e4c4d9789406efe8f/VSCodeUserSetup-x64-1.51.1.exe

代码编辑器哪个好用(电脑程序编程入门代码)


2、VSCODE安装

下图为确认安装过程,安装成功后启动VSCode:

代码编辑器哪个好用(电脑程序编程入门代码)代码编辑器哪个好用(电脑程序编程入门代码)代码编辑器哪个好用(电脑程序编程入门代码)代码编辑器哪个好用(电脑程序编程入门代码)代码编辑器哪个好用(电脑程序编程入门代码)代码编辑器哪个好用(电脑程序编程入门代码)


3、VSCode安装插件

Chinese (Simplified) Language Pack for Visual Studio Code(配置显示语言“zh-cn”)、

Vetur、stylelint、Sass、Prettier – Code formatter、GitLens–Git supercharged、ESLint、EditorConfig for VS Code、Debugger for Chrome、Debugger for Java、Code Runner、Auto Rename Tag

代码编辑器哪个好用(电脑程序编程入门代码)

》》重启之后

代码编辑器哪个好用(电脑程序编程入门代码)


4、自定义配置

打开文件->首选项->设置,就会进入到 settings.json 文件中,以下是自定义配置:

{
  \"git.confirmSync\": false,
  \"git.autofetch\": true,
  \"git.checkoutType\": \"remote\",
  \"git.enableSmartCommit\": true,
  \"files.autoSave\": \"onFocusChange\",
  \"files.associations\": {
    \"*.vue\": \"vue\",
    \"*.wpy\": \"vue\",
    \"*.wxml\": \"wxml\",
    \"*.wxss\": \"css\",
    \"*.js\": \"javascript\",
    \"*.html\": \"html\",
    \"*.cjson\": \"jsonc\",
    \"*.wxs\": \"javascript\"
  },
  \"emmet.syntaxProfiles\": {
    \"vue-html\": \"html\",
    \"vue\": \"html\"
  },
  \"emmet.includeLanguages\": {
    \"wxml\": \"html\"
  },
  \"eslint.autoFixOnSave\": true,
  \"eslint.validate\": [
    \"javascript\",
    \"javascriptreact\",
    {
      \"language\": \"html\",
      \"autoFix\": true
    },
    {
      \"language\": \"vue\",
      \"autoFix\": true
    },
    {
      \"autoFix\": true,
      \"language\": \"javascript\"
    },
    {
      \"autoFix\": true,
      \"language\": \"javascriptreact\"
    },
    {
      \"autoFix\": true,
      \"language\": \"typescript\"
    },
    {
      \"autoFix\": true,
      \"language\": \"typescriptreact\"
    }
  ],
  \"terminal.integrated.shell.windows\": \"C:\\Windows\\System32\\cmd.exe\",
  \"window.zoomLevel\": 1,
  \"explorer.confirmDelete\": false,
  \"vetur.experimental.templateInterpolationService\": false,
  \"editor.tabSize\": 4,
  \"editor.tabCompletion\": \"on\",
  \"editor.codeActionsOnSave\": {
    \"source.fixAll\": true
  }
}

5、设置>用户代码片段

{
    // 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\"
    },
    \"Print to vue template\": {
        \"prefix\": \"vue\",
        \"body\": [
            \"<template>\",
            \"    <div class=\'page-view\'>\",
            \"      1\",
            \"    </div>\",
            \"</template>\",
            \"      \",
            \"<script lang=\'ts\'>\",
            \"import Vue from \'vue\'\",
            \"export default Vue.extend({\",
            \"    data() {\",
            \"      return{}\",
            \"    },\",
            \"    methods:{}\",
            \"});\",
            \"</script>\",
            \"      \",
            \"<style lang=\'scss\' scoped>\",
            \".page-view {\",
            \"  min-height: 100%;\",
            \"}\",
            \"</style>\"
        ],
        \"description\": \"Log output to vue template\"
    }
}

给TA打赏
共{{data.count}}人
人已打赏
引流推广

联想所有智能手机有哪些(联想官网维修点地址查询)

2022-5-4 9:20:51

引流推广

内部项目管理软件有哪些(项目管理软件排行榜)

2022-5-4 9:20:53

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索