-------------------------------------------------------------------------------------   wps

第一页没有页码

 选中本页之后

 

封面不现在目录中：

1 在第一页右键--设置目录级别为文本

2 第一个不要出现标题等样式

 -------------------------------------------------------------------------------------    sublime text

https://blog.csdn.net/tcbhaiqiang/article/details/82492724

在线Color Scheme 生成器地址：http://tmtheme-editor.herokuapp.com/

 

安装插件：

插件本地保存路径：(从版本3切换到版本4, 插件的兼容性问题，可以先删除Roaming\有关sumlime text的插件等数据，安装会重新生成对应文件)

C:\Users\Administrator\AppData\Roaming\Sublime Text\Installed Packages

 

1、 安装package control 好之后： 

ctrl + shift + p -> install package control   回车 

安装package control 好之后查看， preferences菜单下有 package control 。如：preferences / package control 

2、安装其他插件：

ctrl + shift + p  -> 选择 package control:install package  回车->输入插件名搜索下载：

3、删除插件 ： ctrl + shift + p  -> 选择 package control: remove package   回车-> 输入插件名搜索删除： 

 

https://blog.csdn.net/qq_39947874/article/details/126280419

插件：

（1）安装LESS插件：因为Sublime不支持Less语法高亮，所以，先安装这个插件，方法： ctrl+shift+p>install Package>输入less按Enter
   （2）安装LESS2CSS插件：这个插件的作用是

　　　　当保存less文件的时候自动生成同名的css文件；
　　　　当保存less文件的时候提示编译错误信息；
　　　　批量编译项目目录下的所有less文件为css文件。


ChineseLocalizations 汉化
BracketHighlighter 代码匹配[] {} () \ 标签等。并高亮标记
docBlockr 优美注释 （可自行设置）。包括函数名 参数 返回值等 并以多行希纳是
emmet 标签名+tab html代码生成
view in browser 浏览器运行html文件 配置：preferences - key bindings 修改快捷键为f3 默认浏览器为google
markdown editing 写作者必备

autoprefix 自动补全
submlimeTemp快速生成文件模板

 Trmmer 你知道当你编写代码时，由于错误或别的某些原因，会产生一些不必要的空格。需要注意的是多余的空格有时也会造成错误。这个插件会自动删除这些不必要的空格

ColorPicker  调用你本机的调色板应用。（译者扩充：）这是一个双向的功能，你既可以在调色板中选择一个颜色，然后按“确定”按钮把该值填写到 SublimeText 中活动文档的当前位置，也可以在活动文档中选择一个颜色的值，按此插件的快捷键就会在显示的调色板中定位到该值所对应的颜色。

Alignment   这个插件让你能对齐你的代码，包括 PHP、CSS 和 Javascript。代码看起来更简洁和可读，便于编辑。您可以查看下面的图片来明白我说的意思。

CSSComb 这是用来给CSS属性进行排序的格式化插件。如果你想保持的代码干净整洁，并且希望按一定的顺序排列（是不是有点强迫症了？），那么这个插件是一种有效解决的方案。特别是当你和其他有自己代码编写风格的开发者一同协作的时候

 Emmet

// -----------------------插件Emmet的快捷键使用。 原插件是前面 不加 <, 但是安装了其他插件导致必须前面添加 <箭头符号才管用

/*! + Tab，可快速生成 HTML 文档常用结构代码（默认），当然也可以修改这个模板。
<!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

</body>
</html>*/

/*标签名 + Tab ，自动补全标签，包括尖括号与结尾的结束标签。
<p + Tab
<p></p>*/

/*
<div{我是文字内容}
<div>我是文字内容</div>*/

/*
一次添加多个属性
<div#header.container[title="我是一个容器"]
<div id="header" className="container" title="我是一个容器"></div>
*/

/*
#id
<div id="id"></div>
*/

/*
<.nav
<div className="nav"></div>
*/

/*> + Tab，表示输入为标签子代
<div>p>span
<div>
<p><span></span></p>
</div>*/

/*多个dom元素之间用 + 号连接即可-
<div+p+span
<div></div>
<p></p>
<span></span>*/

/*
^号 ，表示输入到标签上级
<div>p^span
<div>
<p></p>
</div>
<span></span>
*/

/*表示输入多个标签。
<div>ul>li*number
<div>
<ul>
<li></li>
<number></number>
</ul>
</div> */

/*
占位符$ + Tab，$ 的数量代表序列号的位数
<div.container#header>p{$$排序}*3
<div className="container" id="header">
<p>01排序</p>
<p>02排序</p>
<p>03排序</p>
</div>
*/

 

 

CanIUse 如果您想检查浏览器是否支持你包括在你的代码中的CSS和HTML元素，那么这是你需要的插件。所有您需要做的就是选择有疑问的元素，插件将为你做其余的事情。

FTPSync  默认情况下SublimeText不具备FTP的功能，如果你正在寻找能在您的SublimeText应用程序中使用的免费和易用的FTP工具，你可以考虑FTPSync。这是一个非常简单的FTP同步工具，它可以控制上传目标的多重命名。让我们知道您的想法。

 

SideBarEnhancements 是sublime的加强侧边栏插件 在View—side bar菜单中可以控制显示或隐藏侧边栏（下图），我们可以将一个项目文件夹拖动到侧边栏中，就可以很方便地对目录下的文件进行可视化管理。

Vue Syntax Highlight:这是一个基础的Vue文件语法高亮插件，可以帮助你更好地阅读和理解Vue文件中的代码。

Vuejs Complete: 提供Vue文件内代码自动补全功能，包括指令、事件、组件等。

Vuejs Snippets: 提供Vue代码片段，可以快速插入常用的Vue代码模板，如生命周期钩子、计算属性等。

Vuejs Ultimate Snippets: 另一个提供Vue代码片段的插件，通常比Vuejs Snippets提供更多的代码片段选项。

sublimeserver: 启动本地服务

 

启动本地服务（sublimeserver） 

安装插件 sublimeserver

安装好后的进入Tools -> SublimeServer -> Settings进入以下页面，在这里可以更改端口号，默认8080

启动服务：Tools -> SublimeServer -> Start SublimeServer，

使用服务，在已经写好的页面，直接鼠标右键，然后选择 View in SublimeServer即可

 

注意：colorcoder 插件导致标签底色显示白色

remove package  回车  在输入需要删除的插件即可删除

 

常用的vue插件：

 

编辑器包管理工具  install package 丢失问题解决

打开： preferences->settings， 删除package control  ,添加"debug":true.。重启编辑器Ok

 

 

-------------------------------------------------------------------------------------    Microsoft VS Code

 官网地址： https://code.visualstudio.com/docs/?dv=win64user

Volar 重大更新：

在2024.3.5更新的v2.0.5版本中,改名为Vue - Official；支持Vue3.4；Take over模式被弃用；TypeScript Vue Plugin被弃用；

 

  • 如果出现误报错误，请尝试在工作区根目录中创建一个空的 jsconfig.json:

 

-------------------------------------------------------------------------------------   更新

解压版  

直接下载解压包，放置到原来的位置，替换原来的旧文件，环境变量位置没变就不用重配。 

 

网络有说把旧文件中的data复制到新的文件夹中，这样旧的配置在新的版本中继续保存，但是我的没发现有data文件夹，所以直接替换

也有网络说（可能是安装版）：不用卸载，直接安装新的，会自动覆盖就旧版本，之前装的插件还在。

 

https://www.jb51.net/softjc/832292.html

手动方式一、

  手动方式二、

 

更新 ：help-->check for updates

 

 

配置环境

D:\installed\vscode\VSCode-win32-x64-1.92.2\bin

插件的存放位置&激活

  • Windows：在Windows系统中，插件应该存放在以下文件夹中：

    • 对于全局插件：C:\用户[用户名].vscode\extensions   如展存放位置： C:\Users\Administrator\.vscode\extensions
    • 对于用户插件：C:\用户[用户名]\AppData\Roaming\Code\User\extensions

 要激活特定插件文件夹，

你只需在VS Code的设置中进行配置。打开设置窗口，搜索"extensions"，然后选择"Extension > Advanced Configuration"。在"Active"字段中，设置为你想要激活的插件文件夹的路径。

https://worktile.com/kb/p/1963560

 

vs code 代码检查插件配置 参考文档： 

https://blog.51cto.com/u_16213705/12689685

 

本地服务插件

live server

是vscode的运行页面到浏览器插件, 在html文件上右键运行: open with live server

 

插件 ：
绘图插件： draw.io integration        可创建文件1.draw 或2.draw.io
读取远程仓库目录： cgithub repositories

 

主题色

下载一款主题 

 Atom One Light 

打开VS code选择’文件’‘→’首选项’→’颜色主题’：在弹出来的输入框输入Atom One Light Theme，

 默认会设置为刚下载的主题

选用主题
file -- preferences--sheme--color cheme  (快捷键  ctrl +K  ctrl+t ), 默认选中的是刚下载的主题， 可以选择设置需要的主题

设置护眼色

 默认修改的是选用的主题 如  Atom One Light 

file -- preferences--setting, 输入 workbench.colorCustomizations 回车，    点击按钮进入 setting.json文件编辑模式

 

原有配置：

{
    "git.path": "D:/installed/Git/cmd/git.exe",
    "git.autofetch": true,
    "git.confirmSync": false,
    "editor.unicodeHighlight.allowedCharacters": {
        " ": true
    },
    "git.openRepositoryInParentFolders": "always",
    "window.zoomLevel": -1,
    "RainbowBrackets.depreciation-notice": false,
    "workbench.colorTheme": "Atom One Light",
    "workbench.colorCustomizations": {
       

       
        "[eclipse-color-theme]": {
            "editor.background": "#CCE8CF"
        }

    },
}
 

替换原来配置后的内容：

{
"workbench.colorTheme": "Atom One Light",
"editor.tabSize": 2, //工作台主题颜色
"typescript.updateImportsOnFileMove.enabled": "always",
"editor.formatOnSave": true, // 保存时格式化
"breadcrumbs.enabled": false, // 开启 vscode 文件路径导航
// "tslint.autoFixOnSave": true, // #每次保存的时候将代码按tslint格式进行修复
"eslint.autoFixOnSave": true, // #每次保存的时候将代码按eslint格式进行修复
// "prettier.semi": false,//prettier 设置语句末尾不加分号
"prettier.singleQuote": true, // prettier 设置强制单引号
"vetur.format.defaultFormatter.js": "vscode-typescript", // #让vue中的js按编辑器自带的ts格式进行格式化
"window.enableMenuBarMnemonics": false,
"liveServer.settings.donotShowInfoMsg": true,
// "workbench.colorTheme": "Winter is Coming (Light)", //窗口.不启用菜单栏输入法,修改主题配色
"workbench.colorCustomizations": { // 颜色设置

　　// "foreground": "#75a478",
        "editor.background": "#C7EDCC",
        // "editor.background": "#c1d8ac",
        "sideBar.background": "#CCE8CF", // 侧边栏
        "activityBar.background": "#CCE8CF",  // 活动栏
        "terminal.background": "#EAEAEF",
       
        "panel.background": "#CCE8CF",/*面板背景色，面板显示在编辑器区域下*/
        "titleBar.activeBackground": "#CCE8CF",/*活动窗口标题栏背景色*/
        "statusBar.background": "#CCE8CF",/*工作区打开时状态栏的背景色*/
        "tab.activeBackground": "#CCE8CF",/*活动选项卡的背景色*/
        "tab.inactiveBackground": "#CCE8CF",/*普通选项卡背景色*/
        "editorGroupHeader.tabsBackground": "#CCE8CF",/*选项卡停靠位置的背景色*/

},
"files.autoGuessEncoding": true,
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"extensions.ignoreRecommendations": true,
"window.zoomLevel": 0
}

 

参照 ： 

https://blog.csdn.net/qq_39233554/article/details/105639331

https://blog.csdn.net/mytf201983/article/details/138684234

 

配置文件 setting.json的位置： --------------------------------------

windows系统：   %APPDATA%\Code\User\

自己配置的内容：

// {
// "git.path": "D:/installed/Git/cmd/git.exe",
// "git.autofetch": true,
// "git.confirmSync": false,
// "editor.unicodeHighlight.allowedCharacters": {
// " ": true
// },
// "git.openRepositoryInParentFolders": "always",
// "window.zoomLevel": -1,
// "RainbowBrackets.depreciation-notice": false,
// "workbench.colorTheme": "Atom One Light",
// "workbench.colorCustomizations": {

// "[eclipse-color-theme]": {
// "editor.background": "#CCE8CF"
// }

// },
// }

{
"workbench.colorTheme": "Atom One Light",
"editor.tabSize": 2, //工作台主题颜色
"typescript.updateImportsOnFileMove.enabled": "always",

"vetur.format.defaultFormatter.js": "vscode-typescript", // #让vue中的js按编辑器自带的ts格式进行格式化
"window.enableMenuBarMnemonics": false,
"liveServer.settings.donotShowInfoMsg": true,
// "workbench.colorTheme": "Winter is Coming (Light)", //窗口.不启用菜单栏输入法,修改主题配色
"workbench.colorCustomizations": {
// 颜色设置
// "foreground": "#75a478",
"editor.background": "#C7EDCC",
// "editor.background": "#c1d8ac",
"sideBar.background": "#CCE8CF", // 侧边栏
"activityBar.background": "#9feba6", // 侧边活动栏
"terminal.background": "#EAEAEF", //底部命令窗口

"panel.background": "#CCE8CF" /*面板背景色，面板显示在编辑器区域下*/,
"titleBar.activeBackground": "#9feba6" /*活动窗口标题栏背景色*/,
"statusBar.background": "#CCE8CF" /*工作区打开时状态栏的背景色*/,
"tab.activeBackground": "#9feba6" /*活动选项卡的背景色*/,
"tab.inactiveBackground": "#CCE8CF" /*普通选项卡背景色*/,
"editorGroupHeader.tabsBackground": "#CCE8CF" /*选项卡停靠位置的背景色*/
},
"files.autoGuessEncoding": true,
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"extensions.ignoreRecommendations": true,
"window.zoomLevel": 0,
"RainbowBrackets.depreciation-notice": false,
"explorer.confirmDelete": false,
"git.enableSmartCommit": true,
"git.enabled": true, // 启用 Git 功能
// "git.autofetch": true, // 自动拉取远程变更
// "git.confirmSync": false, // 关闭同步确认提示
// VS Code 默认会尝试从系统环境变量 PATH 中查找 Git。如果 Git 安装时未勾选 Add to PATH，则需手动指定路径
"git.path": "D:/installed/Git/cmd/git.exe",

"fittencode.languagePreference.displayPreference": "en",
"fittencode.languagePreference.commentPreference": "en",
"workbench.iconTheme": "vscode-icons",
"baidu.comate.privateService": "",
"baidu.comate.license": "d3e2c8b1-648e-40b9-8330-0532eb4f2048",
"baidu.comate.enableSecurityEnhancement": false,
"baidu.comate.completionLength": "auto",
"baidu.comate.username": "Administrator",
"diffEditor.codeLens": true,

"editor.formatOnPaste": true, // 控制编辑器是否自动格式化粘贴的内容。格式化程序必须可用，并且能针对文档中的某一范围进行格式化
"editor.formatOnType": true, // 控制编辑器在键入一行后是否自动格式化该行。

// ======== eslint prettier 主要配置========
// https://blog.csdn.net/m0_64289188/article/details/147110688

// configPath 直接指定一个配置文件的路径，指定后会优先使用这个外部配置文件中的规则，而不是默认的配置。
// 需要在项目根目录或指定位置创建一个Prettier配置文件，通常命名为.prettierrc或.prettierrc.json。
// 如，创建文件C:\Users\Administrator\.prettierrc，或者.prettierrc.js文件都可以
// "prettier.configPath": "C:\\Users\\xxxx\\.prettierrc",

// requireConfig 用于控制当找不到配置文件时 Prettier 的行为。即，是否加载配置文件（在根目录，支持多种格式，.prettierrc、prettier.config.js、package.json 、YAML、JS或TOML等）。
// "prettier.requireConfig": false, // false 在 Prettier的早期版本中，默认值是 false。这意味着如果没有找到配置文件，Prettier 仍然会尝试使用默认的配置来格式化代码。
"prettier.requireConfig": true, // 在 Prettier 2.0 及更高版本中，默认值变为 true。这意味着如果没有找到配置文件，Prettier 将不会执行任何格式化操作，而是抛出一个错误，提示需要配置文件。
// requireConfig 和 configPath可以配合使用
// 如果你不确定是否有配置文件存在，或者你想确保总是使用特定的配置文件，可以使用 requireConfig: true 并配合 configPath 指定确切路径。
// 如果你知道确切的配置文件位置，并且希望避免自动查找的开销，直接使用 configPath 会更直接和高效

// https://blog.csdn.net/iotjin/article/details/118015468
// useEditorConfig 配置用于控制是否使用.editorconfig文件中的配置来覆盖Prettier的默认设置。
// 默认值为 false则不覆盖来自prettier的配置规则（即不使用默认的.editorconfig配置文件中定义的任何配置，使用prettierrc中定义的规则，如果没有prettierrc文件，则执行本文件setting.json中定义的配置）。
// 设置为true时，确保你的项目中有.editorconfig文件（通常位于项目的根目录下，用于定义编码风格,并确保你的IDE配置了支持.editorconfig文件），并且它包含了你想让Prettier使用的设置。
// "prettier.useEditorConfig": true, // 为 true，则覆盖，会执行编辑器默认的配置文件.editorconfig。 应该是编辑器默认配置文件.editorconfig没有相关prettier规则（所以覆盖不了），所以任然执行prettier的文件规则。 但是，如果没有prettier插件规则文件，也不执行vscode的setting.json中配置的规则（不知道为什么？）
"prettier.useEditorConfig": false, // 默认值为false,即不使用默认的.editorconfig配置文件中定义的任何配置，优先执行.prettierrc配置文件。 如果没有.prettierrc相关文件，则执行本文件setting.json中定义的配置，所以以下设置才生效。(即为true时，在未创建.prettierrc文件之前，使用以下几项配置生效)
"prettier.trailingComma": "none", //禁止随时添加逗号 （需要安装vetur 是否末尾添加逗号的字段，但是设置无效 ）,其他值： all
"prettier.singleQuote": false, // prettier 设置非单引号
"prettier.semi": false, // 禁止随时添加分号
"prettier.printWidth": 10, // 每行文字个数超出此限制将会被迫换行

// ------------ eslint检查的文件类型
"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "vue", "css", "html", "postcss", "json"],
"breadcrumbs.enabled": false, //
"eslint.codeAction.showDocumentation": {
// 在快速修复菜单中显示打开的lint规则文档网页(显示eslint 信息)。
"enable": true
},
"eslint.enable": true, //启用eslint
// "eslint.autoFixOnSave": true, // 该配置已经弃用，被codeActionsOnSave设置替代
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit" // 当保存的时候，eslint自动帮我们修复错误
// "source.fixAll.eslint": "true"
},
"eslint.format.enable": true,

// formatOnSave、defaultFormatter 这两项必须配置，保存代码时才能生效（自动安照esbenp.prettier-vscode的要求格式化代码）
"editor.formatOnSave": true, // 在保存时自动格式化文件。该设置是为了防止与 eslint、prettier 冲突，但是新版本中默认值就是false。（格式化程序必须可用，延迟后文件不能保存，并且编辑器不能关闭）
// "editor.defaultFormatter": "Vue.volar", // 默认的代码格式化工具
// 全局设置编辑器的默认格式化工具 (如果以下各类文件不单独设置，则以默认为主，如果有单独设置，则覆盖此默认设置。)
"editor.defaultFormatter": "esbenp.prettier-vscode",

// 以下是默认所有文件都使用另一个格式化程序，将仅对Javascript使用Prettier。
// "editor.defaultFormatter": "<默认所有文件都使用另一个格式化程序>"
// "[javascript]": {
// "editor.defaultFormatter": "esbenp.weather vscode"
// },

// 不想自动格式化特定语言javascript，可以在保存时禁用其格式
// "[javascript]": {
// "editor.formatOnSave": false, // 关闭js的格式化
// "editor.formatOnSave": true, // 开启js的格式化 默认是否开启的
// },

// 单独设置类型文件的格式化
"[javascript]": {
// "editor.formatOnSave": false, // 关闭js的格式化
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
// "editor.defaultFormatter": "octref.vetur"
},
"[html]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
//方法括号之间插入空格
// "javascript.format.insertSpaceBeforeFunctionParenthesis": false,

// ======== vetur相关配置 ========
"vetur.validation.template": false,
"vetur.completion.scaffoldSnippetSources": {
"workspace": "💼",
"user": "🗒️",
"vetur": "✌",
"files.associations": {
"*.vue": "html"
}
},
"git.confirmSync": false,
"fittencode.selection.showCodeLens": false,
"workbench.editor.enablePreview": false
// "vetur.format.defaultFormatterOptions": {
// "js-beautify-html": {
// // #vue组件中html代码格式化样式
// "wrap_attributes": "force-aligned", //也可以设置为“auto”，效果会不一样
// "wrap_line_length": 200,
// "end_with_newline": false,
// "semi": false,
// "singleQuote": true
// },

// "prettier": {
// "semi": false,
// "singleQuote": true,
// "no-tabs": "off"
// }
// }
}

 

 

 

-------------------------------------------------------------------------------------    右键打开文件夹 【注意： 该方法 配置注册表】

如果没有右键Open with Code，就新建一个vscode-start-acer.reg文件，然后把下面代码复制到该文件，将vscode的路径【D:\\installed\\vscode\\VSCode-win32-x64-1.92.2\\Code.exe】替换为自己的安装路径，保存，双击就行：

 

Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\*\shell\VSCode]
@="Open with Code"
"Icon"="E:\\Program Files (x86)\\Microsoft VS Code\\Code.exe"

[HKEY_CLASSES_ROOT\*\shell\VSCode\command]
@="\"E:\\Program Files (x86)\\Microsoft VS Code\\Code.exe\" \"%1\""

Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\Directory\shell\VSCode]
@="Open with Code"
"Icon"="E:\\Program Files (x86)\\Microsoft VS Code\\Code.exe"

[HKEY_CLASSES_ROOT\Directory\shell\VSCode\command]
@="\"E:\\Program Files (x86)\\Microsoft VS Code\\Code.exe\" \"%V\""

Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\Directory\Background\shell\VSCode]
@="Open with Code"
"Icon"="E:\\Program Files (x86)\\Microsoft VS Code\\Code.exe"

[HKEY_CLASSES_ROOT\Directory\Background\shell\VSCode\command]
@="\"E:\\Program Files (x86)\\Microsoft VS Code\\Code.exe\" \"%V\""

 

配置完成后在文件夹右键就可以看到： open with code 选项

-------------------------------------------------------------------------------------