VScode

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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值