VScode

news2024/10/2 14:24:51

VScode

下载

VScode:https://code.visualstudio.com/

在这里插入图片描述

安装

汉化

在这里插入图片描述

Chinese (Simplified)

在这里插入图片描述

设置

背景色

Atom One Light Theme

在这里插入图片描述

Color Theme

在这里插入图片描述

护眼色

在这里插入图片描述

在这里插入图片描述

    "workbench.colorCustomizations": { // 设置背景颜色
        // "foreground": "#75a478",
        "editor.background": "#C7EDCC",
        // "editor.background": "#c1d8ac",
        "sideBar.background": "#FAF9DE",
        "terminal.background": "#EAEAEF"
    }

关闭自动更新

在这里插入图片描述

设置自动保存

在这里插入图片描述

注:

  • 默认设置 off ,不自动保存;
  • afterDelay —— 将在配置的 “#files.autoSaveDelay#” 后自动保存为保存的编辑器;
  • onFocusChange —— 当编辑器失去焦点时,将自动保存为保存的编辑器(可理解为鼠标不在 VSCode 里时);
  • onWindowChange —— 当窗口失去焦点时,将自动保存为保存的编辑器(窗口可理解为每个代码脚本,当鼠标从 A 脚本转到 B 脚本时,自动保存脚本 A 的修改内容);

语言切换

快捷键:Shift + Ctrl + p
在这里插入图片描述

在这里插入图片描述

关闭缩略图

在这里插入图片描述

关闭导航路径

在这里插入图片描述

关闭禅模式

在这里插入图片描述

Startup

在这里插入图片描述

Hot Exit(退出提示)

在这里插入图片描述

是否显示为预览

在这里插入图片描述

开启平滑插入动画

在这里插入图片描述

开启禅模式

在这里插入图片描述

NewLines

在这里插入图片描述

插件

jslint

在这里插入图片描述

vue

在这里插入图片描述

vetur

在这里插入图片描述

vscode-icons

在这里插入图片描述

HTML CSS Support

在这里插入图片描述

JavaScript (ES6)

在这里插入图片描述

IntelliSense for CSS

在这里插入图片描述

Bootstrap 4

在这里插入图片描述

Beautify(css)

在这里插入图片描述

Beautyfi(js)

在这里插入图片描述

Easy LESS

在这里插入图片描述

Debugger for Chrome

在这里插入图片描述

GitLens

在这里插入图片描述

Git History

在这里插入图片描述

Open in Browser

在这里插入图片描述

Live Server

在这里插入图片描述

扩展设置

在这里插入图片描述

Prettier-Code Formatter

在这里插入图片描述

format on save

在这里插入图片描述

Auto Save

在这里插入图片描述

Auto Rename Tag

在这里插入图片描述

Bracket Pair Colorizer 2

在这里插入图片描述

Browser Preview

在这里插入图片描述

Community Material Theme

在这里插入图片描述

Indent-Rainbow

在这里插入图片描述

Markdown All in One

在这里插入图片描述

LeetCode

在这里插入图片描述

前端开发

Emmet插件

创建html文件,输入!,就有提示。

在这里插入图片描述

快速生成代码

输入:
ul>li>a
ul>li>a.link
ul.header>li>a.link
ul.header>(li>a.link)*5
div.searche>div.logo+input
div.searche>div.logo{Logo}+input

包管理工具

nvm

https://github.com/nvm-sh/nvm
#https://github.com/nvm-sh/nvm#installing-and-updating

https://github.com/coreybutler/nvm-windows
#nvm-setup.zip

yarn

官网
https://yarn.bootcss.com/

在这里插入图片描述

下载地址
https://github.com/yarnpkg/yarn/releases
安装
npm install yarn -g
操作
yarn -V
yarn config get registry
yarn config set registry 'https://registry.npm.taobao.org/'

npm&cnpm

官网
https://npmmirror.com/
安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm i -g nrm
nrm ls
nrm help
nrm use taobao

Nodejs安装

创建项目

手动创建项目

全局安装vue-cli,vue-cli
npm uninstall -g @vue/cli
npm install -g @vue/cli@3.11.0

安装webpack,它是打包js的工具
npm install -g webpack 

npm install -g @vue/cli-init

创建项目
vue init webpack vue-demo

运行项目
npm run dev

项目打包发布上线
npm run build

完成之后,项目文件夹中会出现一个dist文件夹,里面就是打包之后的内容,直接部署就好了

vueAdmin-template

vueAdmin-template是 一个简单的 vue admin 管理后台 它只包含了 Element UI & axios & iconfont & permission control & lint ,这些是必须的

git clone https://github.com/PanJiaChen/vue-admin-template.git

修改端口号

webpack创建的vue项目,端口号默认是8080
项目对应的 config 文件夹里的 index.js ,此时可以看到项目配置了 port:8080

vue-element-admin

https://panjiachen.github.io/vue-element-admin-site/guide/#project-structure
https://juejin.cn/post/6844903476661583880
git clone https://github.com/PanJiaChen/vue-admin-template.git

修改端口号

webpack创建的vue项目,端口号默认是8080
项目对应的 config 文件夹里的 index.js ,此时可以看到项目配置了 port:8080

vue-element-admin

https://panjiachen.github.io/vue-element-admin-site/guide/#project-structure

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/7469.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

List详解

一、List(列表) 基本的数据类型,列表 在redis中,通过相应操作可以让list变成栈、队列、阻塞队列! 在redis中所有的list命令都是以 l 开头的 添加值 将一个值或多个值,插入到列表尾部(右&…

深度学习之语义分割算法(入门学习)

>>>深度学习Tricks&#xff0c;第一时间送达<<< 目录 &#x1f4a1; 写在前面 一、前言 二、深度学习的图像分割分类 1.语义分割 2.实例分割 3.全景分割 三、语义分割的基本原理 四、语义分割的常用运算及评价指标 关于算法改进及论文投稿可关注并留…

【附源码】Python计算机毕业设计寿险公司保险业务管理系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

指令格式学习

计算机的指令格式与机器的字长、存储器的容量及指令的功能都有很大的关系。从便于程序设计、增加基本操作并行性、提高指令功能的角度来看&#xff0c;指令中应包含多种信息。但在有些指令中&#xff0c;由于部分信息可能无用&#xff0c;这将浪费指令所占的存储空间&#xff0…

python web服务windows管理工具

故事背景是这样的。。。 客户需要一些小工具&#xff0c;作为一名开发者&#xff0c;很容易的就写完了。但是呢&#xff0c;客户没有服务器&#xff0c;只能部署在windows上。由于不再一起&#xff0c;维护一个web程序&#xff0c;有时候会有些折腾&#xff0c;所以&#xff0…

Camunda 使用restapi

参考&#xff1a;http://camunda-cn.shaochenfeng.com/reference/rest/task/get-query/ 这里我就举一个流程的例子&#xff1a; 以下接口&#xff0c;除了端口和参数&#xff0c;其他无需改动 POM&#xff1a; rest 就是接口 webapp 是网页 <dependency><groupId&…

安全狗持续4年零失误实力守护金鸡颁奖典礼

11月10日-12日&#xff0c;第35届中国电影金鸡奖颁奖相关活动顺利在厦门举办。 如果用电影的方式回看他们这几天的重保值守任务的话&#xff0c;会是怎么样的? PART 1 背景交代 距离第一次接到此客户的任务&#xff0c;时间已经过去4年。今年这次任务的开启得让时间倒退到5天之…

el-tabs切换按钮定位不准确,部分内容被遮挡(前端vue实战踩坑记录)

在写项目的过程中&#xff0c;特别是vue项&#xff0c;我们最常用到的UI框架就是elementUI&#xff0c;现记录一个今天同事开发遇到的bug。 一、问题描述 页面跳转时&#xff0c;tabs切换按钮被遮挡展示不全&#xff0c;效果如图 正常情况下&#xff0c;右侧的用户后面的…应…

kotlin函数

一、Main函数 fun printHello() {println("Hello World")}printHello() Hello World在main的函数中&#xff0c;执行播放按钮&#xff0c;会编译执行&#xff0c;结果在下面显示&#xff1a; 1.1 Basic Task Create a new Kotlin file.Copy and paste the main()…

Java中方法的注意事项

C有函数&#xff0c;我们Java有方法&#xff01;实参和形参的关系方法重载public static早在初始Java的那一个博客&#xff0c;我好像就给兄弟们说过&#xff0c;在Java中我们把以前认识到的函数叫做是方法&#xff0c;那么如果单单是为了讲一下方法最基本的使用规则&#xff0…

如何从0-1学习渗透测试?

要成为一名渗透测试员&#xff0c;想从基础学习需要先掌握下面这3块&#xff1a;1、学习硬件和网络渗透测试主要涉及网络和部分涉及硬件。2、操作系统和系统架构操作系统和系统架构在渗透测试中起着关键作用。系统操作涉及x86&#xff08;32位&#xff09;和x64&#xff08;64位…

稳定性实践:开关和预案

在稳定性保障中&#xff0c;限流降级的技术方案&#xff0c;是针对服务接口层面的&#xff0c;也就是服务限流和服务降级。这里还有另外一个维度&#xff0c;就是业务维度&#xff0c;所以今天我们就从业务降级的维度来分享&#xff0c; 也就是开关和预案。 如何理解开关和预案…

AI与轨交并行,智慧服务伴乘客出行

“欢迎来到智能客服中心” “请选择您需要的服务” 大部分乘客在地铁站厅总能听见这样的提示音 而发出提示音的 正是智慧升级过后的地铁智能客服服务中心 地铁作为承载万千群众出行的工具 近年客流呈飞速增长态势 因此&#xff0c;轨道交通行业也正积极进行智慧化转型 …

C语言百日刷题第八天

前言 今天是刷题第8天&#xff0c;放弃不难&#xff0c;但坚持一定很酷~ 快来跟我一起刷题吧。刷题第八天目录前言71.打印7层杨辉三角形72.重新排列数组73.冒泡排序74.将数字变成0的操作次数75.四叶玫瑰数71.打印7层杨辉三角形 打印7层杨辉三角形 图案如下&#xff1a; 这个…

外企面试中的7 个 Android Lifecycle 重要的知识点

习惯性的每天都会打开 medium 看一下技术相关的内容&#xff0c;偶然看到一位大佬分享和 Android Lifecycle 相关的面试题&#xff0c;觉得非常的有价值。 在 Android 开发中 Android Lifecycle 是非常重要的知识点。但是不幸的是&#xff0c;我发现很多新的 Android 开发对 A…

准备pmp考试第13天

准备pmp考试第13天 32 31 感觉答案和题目没有关系 感觉答案和题目没有多大关系&#xff0c;题目看越多 错的越多&#xff0c;答案不按照问的回答&#xff0c;跑题了 30 29 28 PMP 激励&#xff1a;为某人采取行动提供了理由。 提高团队参与决策的能力并鼓励他们独立工作。这里面…

go - rune类型

一、简介 rune类型是Go语言的一种特殊数字类型。 rune是类型int32的别名&#xff0c;在所有方面都等急啊于它&#xff0c;用来区分字符值跟整数值。 Go语言通过rune处理中文&#xff0c;支持国际化多语言。 字符串由字符组成&#xff0c;字符的底层由字节组成&#xff0c;而一…

码神之路项目总结(二)

目录 一、登录功能 & 二、获取用户信息& 三、退出登录 四、登录拦截&#xffe5; 五、ThreadLocal保存用户信息&#xffe5; 六、文章详情 一、登录功能 & 请求接口&#xff1a; 思路&#xff1a; 1、首先接收前端传过来的用户名和密码&#xff0c;判断值是否为空…

知识图谱认知智能理论与实战----------第二章 知识图谱模式设计

文章目录一. 知识图谱模式二. 模式与本体三. 本体概论I. 模式与本体辨析II.本体的构成要素III.实体分类IV.实体分类四. 六韬法I. 场景II. 复用III. 事物IV. 联系V. 约束VI. 评价一. 知识图谱模式 实体&#xff1a;eg&#xff1a;法国&#xff0c;巴黎…关系&#xff1a;eg&…

深度学习入门(三十六)计算性能——异步计算、自动并行

深度学习入门&#xff08;三十六&#xff09;计算性能——异步计算、自动并行前言计算性能——异步计算教材1 异步计算1.1 通过后端异步处理1.2 小结2 自动并行2.1 基于GPU的并行计算2.2 并行计算与通信3.3 小结前言 核心内容来自博客链接1博客连接2希望大家多多支持作者 本文…