VSCode/浏览器/XPM

stealPigs-youth

已于 2024-05-06 18:57:01 修改

阅读量240

点赞数

文章标签： vscode python

于 2023-10-03 18:54:00 首次发布

本文链接：https://blog.csdn.net/m0_73090085/article/details/133525577

版权

VSCode操作栏

顶栏-配置运行模式

常用一：浏览器运行
常用二：nodejs运行

顶栏-运行

调试模式运行
非调试模式运行

侧栏

底栏

VSCode设置

总体结构

设置命令行光标

VSCode代码片段

React

{
	"React Function Component": {
		"prefix": "react",
		"body": [
		  "import React from 'react';",
		  "",
		  "export default function() {",
		  "  return (",
		  "    <div>",
		  "      $0",
		  "    </div>",
		  "  );",
		  "}",
		  "",
		],
		"description": "React Function Component"
	  }
}

Vue

{
	"Vue Base Component": {
	  "prefix": "vue",
	  "body": [
		"<template>\n",
		"</template>",
		"",
		"<script setup lang='ts'>\n",
		
		"</script>",
		"",
		"<style scoped lang='scss'>\n",
		"</style>"
	  ],
	  "description": "Vue Base Component"
	}
}

VSCode插件

Chinese (Simplified)：简体中文插件
Live Server：开启服务器代理HTML文件
Markdown Preview Enhanced：markdown编辑器

Volar

TS和JS版本

TypeScript Vue Plugin (Volar)
Vue Language Features (Volar)
使用JS编写Vue时，要及时关闭TS版本的Volar并重新加载

配置文件一jsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

配置文件二tsconfig.json

{
    "compilerOptions":{

        //ES版本：ES5,ES2015(ES6),...,ES2021,...,ESNext(最新版本的术语)
	    "target": "ESNext"

        //ES6之前的非标准模块化方案：CommonJS、AMD、UMD
	    //ES6推出：import模块化规范
		//ES9推出：动态import
	    "module": "ESNext"
        "moduleResolution": "Node",                 //模块查找策略
        "allowSyntheticDefaultImports": true        //支持import的默认导入导出

	    "lib": [ES2020，dom，dom.iterable]          //ts文件中支持的库
        
        //baseUrl是，paths[别名]的前缀
        "baseUrl": "./",
        "paths": {
            "@/*": ["src/*"]
        },



	    "outDir": 路径                              //编译文件输出目录

        "removeComments": true                      //移除注释
        "sourceMap": true                           //生成sourceMap文件
        "noImplicitAny": true                       //不允许隐式声明变量
        "preserveConstEnums": true                  //枚举常量依旧以常量的形式存在
        "composite": true                           //用了可以优化性能
    }

    "include": [路径1,路径2...]                     //编译的哪些ts文件
    "references": []                                //引入其他tsconfig.json文件
}

src/**/*：/*表示任意文件；/**表示任意目录

VSCode快捷键

Ctrl+P：显示所有编辑器
Ctrl + Shift + P：显示所有命令
tab作用1：向前移动一个制表符
tab作用2：代码片段自动补全时，移动到下一个自主定义处
shift tab：向后移动一个制表符

浏览器

运行JS代码

页面的JS代码组成	源代码的片段、内容脚本页面HTML中的脚本控制台的代码
三种JS代码作用域	范围相同
日志打印位置	控制台
控制台JS代码	多条语句用";"分隔会打印最后一个表达式的值
源代码的片段	会打印最后一个表达式的值

源代码

页面：当前页面的代码，能打断点进行调试
片段：自主编写JS脚本，能操作当前页面的DOM元素
内容脚本：插件脚本，能操作所有页面的DOM元素

元素

选择DOM元素
修改CSS样式
使用浏览器取色器
移动模式和PC模式互换

控制台

查看各种级别的打印输出

应用程序

查看LocalStorage仓库、SessionStorage仓库、Cookie仓库、IndexedDB非关系数据库

网络

查看网络请求的请求头，请求体，响应头，响应体

录制

录制内容1：鼠标事件、键盘事件、触屏板事件
录制内容2：路由跳转的录制
录制本质：通过js脚本实现操作复现

快捷键

ctrl+f：关键字搜索
ctrl+h：历史记录页
ctrl+j：下载内容页
ctrl+shift+s：截图
ctrl+shift+b：显示或隐藏书签页
F12：开发者工具
F11：开启或关闭全屏模式
F5：页面刷新

设置开发者工具位置

把控制台放到下左右，或者单独开一个窗口

常用插件

WebTab-AI新标签页
Vue.js devtools
React Developer Tools
PostWoman Http接口调试插件
FeHelper(前端助手)

nvm&npm&node

联系

nvm管理多个nodejs
一个node版本对应一个npm
C:\Users\Administrator\.npmrc是npm的全局配置文件
.\npmrc中可以配置全局安装库目录、第三方库镜像

nvm的功能

下载指定版本的nodejs
切换nodejs版本

配置nvm

配置环境变量NVM_HOME: D:\proSofts\nvm
nvm指令会读取配置文件%NVM_HOME%\setting.txt
配置环境变量Path: D:\proSofts\nvm
nvm指令在D:\proSofts\nvm目录下
%NVM_HOME%\setting.txt[root]=D:\proSofts\nvm
nvm会把nodejs安装到root目录下
由于win10实现nodejs切换需要用到root\elevate.cmd
而且elevate.cmd默认在%NVM_HOME%目录下
所以root的值通常等于%NVM_HOME%
配置环境变量NVM_SYMLINK: D:\proSofts\nvm\nodejs
NVM_SYMLINK是当前版本nodejs的软链接
配置环境变量Path: D:\proSofts\nvm\nodejs

nvm配置文件

root: D:\proSofts\nvm
arch: 64
node_mirror: http://npmmirror.com/mirrors/node/

nvm的使用

nvm list available&&win10 ：能下载的远程nodejs版本
nvm ls-remote&&Ubuntu：能下载的远程nodejs版本
nvm list：已下载的node版本
nvm current：当前node版本
nvm use 版本号：切换到指定版本
nvm install 版本号：下载指定版本
nvm uninstall 版本号：卸载指定版本

npm全局配置文件

prefix=D:\proSofts\nvm\npm_global npm全局安装目录

cache=D:\proSofts\nvm\npm_cache npm缓存目录
registry=http://registry.npmmirror.com/ npm镜像(优先级高)

python=D:\proSofts\python\3

查看npm全局配置文件：npm confg ls
查看npm全局安装目录：npm config get prefix
设置npm全局安装目录：npm config set prefix 目录地址
查看npm镜像：npm config get registry
设置npm镜像：npm config set registry 镜像地址

npm的使用

package.json：配置文件
npm init -y：初始化项目，生成配置文件
npm ls：当前目录的第三方库
npm ls -g：全局安装的第三方库
npm search <包名>：搜索远程包
npm view <包名> versions：搜索远程包的所有版本
npm i <包名>@<版本号>：下载指定版本号第三方库到当前目录：
npm i <包名> -g：下载第三方库到全局目录
npm i <包名> --force：强制安装
npm i <包名> --legacy-peer-deps：支持安装同一库的多个版本
npm login --registry= xxx：登录远程npm库
npm publish：把当前库发包到远程库
package.json中的包名、主文件夹的名称，尽量不要用中文
node12.0之前的加密库是OpenSSL，node12.0之后的加密库是BoringSSL

清理缓存

npm cache clean --force || 删除D:\proSofts\nvm\npm_cache
删除package-lock.json

npx的使用

npx 命令t 参数<==>命令t 参数
npx 在当前目录的node_module中，寻找命令t
找到命令t，使用命令t
没找到命令t，下载并使用命令t；命令t使用完成，删除命令t

其他Cli指令

pnpm

pnpm create vite：搭建vue、react、electron脚手架

pnpm初始化和运行的项目，一旦移动位置，就很容易报错

配置文件：package.json

cnpm

yarn

包管理工具指令

配置文件：package.json

webpack

vite

打包工具指令

配置文件：webpack.config.js

配置文件：vite.config.js

nodemon

nodemon xxx.js

配置文件：nodemon.json

ts-node

ts-node xxx.ts

默认支持CommonJS模块化

typescript

tsc --init：初始化项目，生成配置文件

配置文件：tsconfig.json

package.json

name：项目名称
version：项目版本号
description：项目描述
author：项目作者
main：入口文件路径；默认是index.js
type：模块化方案；默认是CommonJS
scripts：脚本命令
devpendencies：生成环境依赖
devDependecies：开发环境依赖

package-lock.json

锁定依赖版本：package-lock.json 文件会精确地记录项目依赖模块的版本，以确保在不同的开发环境中安装相同的模块版本，从而避免不同环境下可能出现的版本差异导致的问题。
加快安装速度：npm 在通过 package-lock.json 安装依赖时，会利用缓存机制，从本地缓存中快速安装相应的模块，从而提高安装速度。
提供依赖完整性保证：package-lock.json 文件会记录每个模块的完整依赖关系树，保证每个模块的依赖都可以被满足并安装成功。

nrm

全称npm registry manager，用于npm镜像源间的切换。

Maven

概述

安装maven	手动安装到喜欢的位置(推荐) maven wrapper强制下载到C盘固定位置
配置环境变量	M2_HOME：D:\proSofts\maven path：%M2_HOME%\bin
查找依赖的顺序	%M2_HOME%/conf/setting.xml指定的本地maven仓库 %M2_HOME%/conf/setting.xml指定的远程镜像仓库远程maven中心仓库从远程库下载的依赖，会存放到本地maven仓库
项目结构	target classes src main java resources test java pom.xml
功能	安装第三方依赖编译Java项目文件运行Java项目

全局配置文件

%M2_HOME%\conf\settings.xml

<?xml version="1.0" encoding="UTF-8"?>
<settings xmlns="http://maven.apache.org/SETTINGS/1.2.0"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.2.0 https://maven.apache.org/xsd/settings-1.2.0.xsd">

  //设置localRepository本地仓库            
    <localRepository>D:/proSofts/maven/repository</localRepository>
  //设置镜像地址
    <mirrors>
	  <mirror>
		<id>aliyun-maven-public</id>
		<url>https://maven.aliyun.com/repository/public</url>
		<mirrorOf>central</mirrorOf>
	  </mirror>
	  <mirror>
		<id>aliyun-maven-center</id>
		<url>https://maven.aliyun.com/repository/central</url>
		<mirrorOf>central</mirrorOf>
	  </mirror>
	</mirrors>
 ...........
</settings>

mvn的使用

mvn clean：删除target文件夹
mvn compile：编译src/main中的Java类，并把class字节码放到target中
mvn dependency:resolve：下载pom文件中的第三方依赖
mvn exec:java：运行pom文件指定的入口类
mvn test：运行src/test/java中的所有测试文件
mvn test -Dtest=类A#方法A：运行src/test/java中类A的方法A

pom.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"
>        

    <modelVersion>4.0.0</modelVersion>
    <groupId>com.example</groupId>
    <artifactId>my-project</artifactId>
    <version>1.0.0</version>

    <dependencies>
       ....
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>exec-maven-plugin</artifactId>
                <version>1.6.0</version>
                <configuration>
                    <mainClass>运行的主类</mainClass>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

VS Installer

安装VS Community

采用默认安装位置

VS Installer：C:\Program Files (x86)\Microsoft Visual Studio\Installer

VMware workstation 16

安装VMware

问题一

安装时不输入密匙
接下来的操作会遇到下面情况

解决方案

将VMware workstation卸载，重新安装时输入密匙
密匙有：可以自己查阅

虚拟机属性

配置虚拟网络

所需镜像下载

windows镜像：前往windows官网
centos镜像：前往centos官网
ubuntu镜像：前往ubuntu官网

DBeaver

Python

windows

采用驱动程序安装
pythonPath通常有：当前目录、系统变量PYTHONPATH、sys.path
sys.path通常有：%pythonHome%、%pythonHome%/Lib、%pythonHome%/Lib/site-packages
pip下载路径：%pythonHome%/Lib/site-packages
移动或修改%pythonHome%文件夹，很可能导致pip.exe找不到python.exe

Ubuntu

apt install python2
apt install python3

snipaste

F1截图
截图完成后，可以贴图、保存、标注
鼠标滚动可以放大或缩小贴图
Ctrl+鼠标滚动可以增减贴图的透明度

stealPigs-youth

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
VSCode/浏览器/XPM

nvm的功能下载指定版本的node切换node版本环境变量nvmnodenpmnvm管理的node有多个版本一个node版本对应一个npmC:\Users\Administrator\.npmrc是npm的全局配置文件.\npmrc中可以配置npm全局安装目录安装maven手动安装到喜欢的位置(推荐)maven wrapper强制下载到C盘固定位置配置环境变量查找依赖的顺序%M2_HOME%/conf/setting.xml指定的本地maven仓库。
复制链接

扫一扫