• VScode


    VScode

    下载

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

    在这里插入图片描述

    安装

    汉化

    在这里插入图片描述

    Chinese (Simplified)

    在这里插入图片描述

    设置

    背景色
    Atom One Light Theme

    在这里插入图片描述

    Color Theme

    在这里插入图片描述

    护眼色

    在这里插入图片描述

    在这里插入图片描述

        "workbench.colorCustomizations": { // 设置背景颜色
            // "foreground": "#75a478",
            "editor.background": "#C7EDCC",
            // "editor.background": "#c1d8ac",
            "sideBar.background": "#FAF9DE",
            "terminal.background": "#EAEAEF"
        }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    关闭自动更新

    在这里插入图片描述

    设置自动保存

    在这里插入图片描述

    注:

    • 默认设置 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文件,输入!,就有提示。
    
    • 1

    在这里插入图片描述

    快速生成代码

    输入:
    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
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    包管理工具

    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
    
    • 1
    • 2
    • 3
    • 4
    • 5
    yarn
    官网
    https://yarn.bootcss.com/
    
    • 1

    在这里插入图片描述

    下载地址
    https://github.com/yarnpkg/yarn/releases
    
    • 1
    安装
    npm install yarn -g
    
    • 1
    操作
    yarn -V
    yarn config get registry
    yarn config set registry 'https://registry.npm.taobao.org/'
    
    • 1
    • 2
    • 3
    npm&cnpm
    官网
    https://npmmirror.com/
    
    • 1
    安装
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    npm i -g nrm
    nrm ls
    nrm help
    nrm use taobao
    
    • 1
    • 2
    • 3
    • 4
    • 5

    Nodejs安装

    • 1

    创建项目

    手动创建项目
    全局安装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文件夹,里面就是打包之后的内容,直接部署就好了
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    vueAdmin-template

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

    git clone https://github.com/PanJiaChen/vue-admin-template.git
    
    • 1
    修改端口号
    webpack创建的vue项目,端口号默认是8080
    项目对应的 config 文件夹里的 index.js ,此时可以看到项目配置了 port:8080
    
    • 1
    • 2
    vue-element-admin
    https://panjiachen.github.io/vue-element-admin-site/guide/#project-structure
    https://juejin.cn/post/6844903476661583880
    
    • 1
    • 2
    git clone https://github.com/PanJiaChen/vue-admin-template.git
    
    • 1
    修改端口号
    webpack创建的vue项目,端口号默认是8080
    项目对应的 config 文件夹里的 index.js ,此时可以看到项目配置了 port:8080
    
    • 1
    • 2
    vue-element-admin
    https://panjiachen.github.io/vue-element-admin-site/guide/#project-structure
    
    • 1
  • 相关阅读:
    配置git-ssh
    企业信息化改革怎么做?
    本地生活小程序有什么功能_本地生活小程序的优势
    三十九、Fluent时间步长的估算与库朗数
    力扣每日一题2022-08-25中等题:分割数组为连续子序列
    Android类加载
    设计模式(二)| 结构型模式(适配器模式、代理模式等)
    AndroidStudio案例——登录页面的切换
    ubuntu虚拟机终端使用安装脚本报错,请问如何解决
    【scikit-learn基础】--『数据加载』之外部数据集
  • 原文地址:https://blog.csdn.net/docsz/article/details/127862664