(超详细)vscode中配置latex的方法

vscode中怎么配置latex?下面本篇文章给大家介绍一下vscode配置配置latex的方法(超详细),希望对大家有所帮助!

(超详细)vscode中配置latex的方法

【推荐学习:vscode教程、编程视频】

之前一直用的是texstudio写论文,但我觉得texstudio的ui不好看,加上实际使用过程中,texstudio的工具栏里面那些功能我一直没有用过,只需要简单地编写tex文档就足够了,所以考虑使用一款颜值高并且比较轻量化的文档编辑器,因此vscode就进入了我的视线之中。

经过一番配置,我成功地在vscode里面调好了tex的编写环境,个人体感和texstudio使用感觉差不多,但颜值更好,使用起来比较开心!写这篇文档是为了记录一下配置心得,防止自己忘记,同时做一个输出,让自己消化一下知识。

需要先说明,这篇文档里面已经默认读者安装好texlive和vscode。

1、latex在vscode中的配置

vscode里面配置tex比较简单,分为两步:(1)安装扩展(2)添加设置

1.1、 安装扩展

打开vscode,左边工具栏里有个扩展栏,选中它!再在搜索框里面搜索latex,如下图所示。

在这里插入图片描述

扩展的下图中标号为1的已安装中看一下出现LaTex Workshop没有,要是有,说明安装成功;或者看看下图中标号为2的红框是否显示成图中那样,如果是,则表明安装成功。

在这里插入图片描述

1.2、添加设置

在vscode页面,按下f1,输入json,选择首选项:打开设置这一项,如下图所示。

在这里插入图片描述
出现如下图所示的页面。

在这里插入图片描述

在这个花括号中就可以输入设置代码了,代码如下:

"latex-workshop.latex.tools": [    {        "name": "pdflatex",        "command": "pdflatex",        "args": [            "-synctex=1",            "-interaction=nonstopmode",            "-file-line-error",            "%DOCFILE%"        ]    },    {        "name": "xelatex",        "command": "xelatex",        "args": [            "-synctex=1",            "-interaction=nonstopmode",            "-file-line-error",            "%DOCFILE%"        ]    },    {        "name": "bibtex",        "command": "bibtex",        "args": [            "%DOCFILE%"        ]    }],"latex-workshop.latex.recipes": [    {        "name": "xelatex",        "tools": [            "xelatex"        ],    },    {        "name": "pdflatex",        "tools": [            "pdflatex"        ]    },    {        "name": "xe->bib->xe->xe",        "tools": [            "xelatex",            "bibtex",            "xelatex",            "xelatex"        ]    },    {        "name": "pdf->bib->pdf->pdf",        "tools": [            "pdflatex",            "bibtex",            "pdflatex",            "pdflatex"        ]    }],"latex-workshop.latex.clean.fileTypes": [    "*.aux",    "*.bbl",    "*.blg",    "*.idx",    "*.ind",    "*.lof",    "*.lot",    "*.out",    "*.toc",    "*.acn",    "*.acr",    "*.alg",    "*.glg",    "*.glo",    "*.gls",    "*.ist",    "*.fls",    "*.log",    "*.fdb_latexmk"],//tex文件浏览器,可选项为"none" "browser" "tab" "external""latex-workshop.view.pdf.viewer": "tab",//自动编译tex文件"latex-workshop.latex.autoBuild.run": "onFileChange",//显示内容菜单:(1)编译文件;(2)定位游标"latex-workshop.showContextMenu": true,//显示错误"latex-workshop.message.error.show": false,//显示警告"latex-workshop.message.warning.show": false,//从使用的包中自动补全命令和环境"latex-workshop.intellisense.package.enabled": true,//设置为never,为不清除辅助文件"latex-workshop.latex.autoClean.run": "never",//设置vscode编译tex文档时的默认编译链"latex-workshop.latex.recipe.default": "lastUsed",// 用于反向同步的内部查看器的键绑定。ctrl/cmd +点击(默认)或双击"latex-workshop.view.pdf.internal.synctex.keybinding": "double-click",

注意,一定要在花括号里面输入啊!

如果花括号里面有其他写好的设置,记得在最后一行代码上加个英文逗号,再另起一行,写好latex的设置。

2 测试

下面测试一下已经配置好的vscode设置是否可以编写tex。

我从IEEE里面下载了一个latex模板,在vscode里面看看能不能编译。

下载好latex模板后,

① 把.tex文件拖入vscode中

② 点击左边工具栏的TEX按钮

③ 找到Build LaTex project,点它!如果不报错的话,则运行成功。我一般会选Recipe:pdflatex作为编译手段

④ 找到View LaTex PDF,选择View in VSCode tab,这个时候就会在vscode的页面中出现生成的pdf了,如下图右边白色区域所示。

在这里插入图片描述

要是一切正常,到这里就结束了。

3 Latex配置代码说明

这里主要是写一些在第1.2节里面配置代码的说明,防止自己忘记。

3.1 编译命令

"latex-workshop.latex.tools": [    {        "name": "pdflatex",        "command": "pdflatex",        "args": [            "-synctex=1",            "-interaction=nonstopmode",            "-file-line-error",            "%DOCFILE%"        ]    },    {        "name": "xelatex",        "command": "xelatex",        "args": [            "-synctex=1",            "-interaction=nonstopmode",            "-file-line-error",            "%DOCFILE%"        ]    },    {        "name": "bibtex",        "command": "bibtex",        "args": [            "%DOCFILE%"        ]    }],

此处代码是为下面recipe的编译链提供编译命令,name是标签,可被recipe引用,command是编译命令。%DOCFILE%表示文件路径可以为中文。

3.2 编译链

"latex-workshop.latex.recipes": [    {        "name": "xelatex",        "tools": [            "xelatex"        ],    },    {        "name": "pdflatex",        "tools": [            "pdflatex"        ]    },    {        "name": "xe->bib->xe->xe",        "tools": [            "xelatex",            "bibtex",            "xelatex",            "xelatex"        ]    },    {        "name": "pdf->bib->pdf->pdf",        "tools": [            "pdflatex",            "bibtex",            "pdflatex",            "pdflatex"        ]    }],

此处代码定义了编译链,即应按照什么顺序选择编译器编译tex文件,name是标签,即出现在工具栏里面的名称,tool定义了按照何种顺序使用编译器。

3.3 清除辅助文件

"latex-workshop.latex.clean.fileTypes": [    "*.aux",    "*.bbl",    "*.blg",    "*.idx",    "*.ind",    "*.lof",    "*.lot",    "*.out",    "*.toc",    "*.acn",    "*.acr",    "*.alg",    "*.glg",    "*.glo",    "*.gls",    "*.ist",    "*.fls",    "*.log",    "*.fdb_latexmk"],

上面的代码定义了要清除的辅助文件的格式。

//设置为never不清除辅助文件"latex-workshop.latex.autoClean.run": "never",

这里有三个选项,分别是:

① onBuilt:每次编译后都清除辅助文件;

② onFailed: 编译失败时清除辅助文件;

③ never:从不清除辅助文件。

我这里选了never,一开始用的是onFailed,但我发现一旦编译错误之后,vscode会把所有辅助文件全部清除,导致修改代码去掉bug之后,也无法正常编译了,所以选择了nerver

3.4 pdf浏览器选择

//tex文件浏览器,可选项为"none" "browser" "tab" "external""latex-workshop.view.pdf.viewer": "tab",

上面代码定义了编译后查看pdf的浏览器,有4个选项,分别是:

① none: 不用浏览器;

② brower:使用网页浏览器;

③ tab:使用vscode内置浏览器;

④ external:使用外置pdf浏览器。

我用的是vscode内置浏览器,其实网页浏览器也挺好用的,显字大。

3.5 自动编译选项

//自动编译tex文件"latex-workshop.latex.autoBuild.run": "onFileChange",

上面代码定义了自动编译代码的功能,使用默认编译链自动构建tex的project,有3个选项,分别是:

① onFileChange:检测到文件更改的时候自动编译tex;

② onSave:保存的时候自动编译tex;

③ never:不自动编译tex。

我选择的是onFileChange,时时编译,保证自己的文档不丢失。

3.6 显示菜单内容

//显示内容菜单:(1)编译文件;(2)定位游标"latex-workshop.showContextMenu": true,

上面代码定义了在tex文件中,单击鼠标右键出现的菜单选项。

这是属性为true时右键菜单的样子。

在这里插入图片描述

这是属性为false时右键菜单的样子。

在这里插入图片描述

Build LaTex projrct为编译latex项目,SyncTex from cursor为定位tex代码在pdf文件中的位置,即正向定位。

这里为了方便编译和定位正文内容,我选了true选项。

3.6 错误和警告信息提示

//显示错误"latex-workshop.message.error.show": false,//显示警告"latex-workshop.message.warning.show": false,

上面代码定义了出现错误或者警告的时候是否会出现弹窗,我觉得弹窗很烦人,而且在终端中也可看到,所以选择了false属性。

3.7 自动补全功能

//从使用的包中自动补全命令和环境"latex-workshop.intellisense.package.enabled": true,

上面代码定义了是否自动补全命令和环境的功能,我觉得挺实用的,少打很多字,特别方便,还有提示,所以选择了true属性。

3.8 默认编译链选择

//设置vscode编译tex文档时的默认编译链"latex-workshop.latex.recipe.default": "lastUsed",

上面代码设置了vscode编译tex文档中的默认编译链,有2个选项,分别是

① first:选择latex-workshop.latex.recipes的第1条作为默认编译链;

② lastUsed:选择上一次使用的编译链作为默认编译链。

我在这里选择了lastUsed,因为我发现我用的最多的编译链是pdflatex

3.9 反向定位

// 用于反向同步的内部查看器的键绑定。ctrl/cmd +点击(默认)或双击"latex-workshop.view.pdf.internal.synctex.keybinding": "double-click",

上面代码定义了从pdf浏览器中定位vscode的tex代码位置的功能,我觉得这条功能十分十分好用,强烈推荐!

这里也有2个选项,分别是:

① ctrl-click:ctrl+鼠标左键单击;

② double-click:鼠标左键双击。

我比较喜欢鼠标左键双击,所以选择的第二个选项。

4 结束

到这里整篇文档就结束啦!

我是参考了这篇文档来配置latex的,感谢这位作者!

要是不会安装texlive和vscode的话,这篇文档也有很详细的介绍,大家可以看看。

更多关于VSCode的相关知识,请访问:vscode基础教程!

以上就是(超详细)vscode中配置latex的方法的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/56036.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月9日 23:35:07
下一篇 2025年11月9日 23:43:44

相关推荐

  • 使用 Mask 导入本地图片时,如何解决跨域问题?

    跨域疑难:如何解决 mask 引入本地图片产生的跨域问题? 在使用 mask 导入本地图片时,你可能会遇到令人沮丧的跨域错误。为什么会出现跨域问题呢?让我们深入了解一下: mask 框架假设你以 http(s) 协议加载你的 html 文件,而当使用 file:// 协议打开本地文件时,就会产生跨域…

    2025年12月24日
    200
  • 为什么在 React 组件中无法获得 Tailwind CSS 语法提示?

    为什么在 React 组件中无法获得 Tailwind CSS 语法提示? 你在 VSCode 中编写 HTML 文件时,可以正常获取 Tailwind CSS 语法提示。但当你尝试在 React 组件中编写 Tailwind CSS 时,这些提示却消失不见了。这是什么原因造成的? 解决方案 要解决…

    2025年12月24日
    000
  • 如何在 VSCode 中为 React 组件启用 Tailwind CSS 提示?

    在 vscode 中为 react 组件启用 tailwind css 提示 如果你在使用 vscode 编写 react 组件时,发现 tailwind css 提示无法正常显示,这里有一个解决方法: 安装 tailwind css intellisense 插件 这是实现代码提示的关键,确保你已…

    2025年12月24日
    200
  • Vue3 中如何将页面上的 PX 单位转换为 REM?

    vue3 下如何实现某个页面 px 自适应到 rem? 在 vue3 中,您可以在某个页面中使用 px 转 rem 的自适应功能,以免影响其他项目 ui 框架。以下是实现方法: 使用 jquery 获取页面宽度,并将其作为基准值。例如,使用 375 作为基准,您可以在页面 mounted 生命周期函…

    2025年12月24日
    000
  • 如何实现 Vue 3 项目中特定页面自适应,避免影响全局 UI 框架?

    自适应页面 px 到 rem 插件探索 在 vue 3 项目中,开发者有时需要让某个特定页面具有自适应大小,即根据不同分辨率自动调整 px 到 rem 的转换。然而,传统的 px-to-rem 插件可能会影响整个项目的 ui 框架。 为了解决这个问题,这里提供了一种利用 javascript 和 v…

    2025年12月24日
    000
  • Vue 3 页面如何实现 px to rem 自适应?

    如何在 vue 3 页面中实现 px to rem 自适应? 在 vue 项目中,有时需要让特定的页面进行 px to rem 自适应,以实现自动缩放。以下是一个可用的解决方案: 使用 javascript 获取页面宽度,并以 375px 作为基准值。例如: let appwidth = $(‘#a…

    2025年12月24日
    400
  • CSS 砌体 Catness

    css 就像技术中的其他东西一样 – 它总是在变化和发展。该领域正在进行的开发是 css 网格布局模块级别 3,也称为 css masonry 布局。 theo 制作了一段视频,介绍了它的开发方式以及苹果和谷歌就如何实施它进行的辩论。 所有这些让我很高兴尝试 css 砌体! webkit…

    好文分享 2025年12月24日
    000
  • 如何解决VSCode中折叠部分的代码复制问题?

    Vscode中折叠代码的复制方法 当Vscode中的代码过多时,可以将其折叠起来以方便查看和编辑。不过,有时用户可能会发现折叠后复制代码时只复制了显示的部分,而折叠部分没有被复制。以下是如何解决此问题的方法: 使用快捷键Ctrl+C直接复制 当代码折叠时,直接使用Ctrl+C快捷键复制即可复制所有代…

    2025年12月24日
    000
  • 如何复制折叠的代码?

    Visual Studio Code 中如何复制折叠的代码? Visual Studio Code (vscode) 中,当遇到过长的代码时,为了提高可读性和简洁性,开发人员会经常使用折叠功能将代码折叠起来。然而,在折叠代码后,直接按住 Ctrl + C 复制代码时,只会复制展开的部分,而折叠的部分…

    2025年12月24日
    000
  • 如何在 VSCode 复制折叠的代码?

    如何复制折叠的 VSCode 代码 使用 VSCode 时,代码过长可能会造成不便。在折叠代码后,发现无法正常复制折叠的部分,令人感到烦恼。本文将介绍一种解决方案,帮助你轻松复制折叠的 VSCode 代码。 问题:如何复制折叠起来的 VSCode 代码? 当你折叠代码后,直接选中复制只会复制未折叠的…

    2025年12月24日
    000
  • CSS 太棒了!

    我正在学习什么 css 赋予了页面活力。多年来,css 变得越来越强大,并且已经开始用于制作以前需要 javascript 的动画。本周我一直在研究它的一些更高级的属性。 媒体查询 媒体查询几乎已经成为新时代设备的必需品。随着智能手机的出现,通过手机消费媒体的人比任何其他设备都多。因此,网站必须在移…

    2025年12月24日
    000
  • 试验 Tailwind CSS:快速指南

    tailwind css 是一个实用性优先的 css 框架,因其灵活性和易用性而在 web 开发人员中广受欢迎。 tailwind css 在 npm 上的每周下载量超过 950 万次(2024 年 8 月 5 日),显然它是 web 开发社区的最爱。在这篇博文中,我们将探讨如何在不设置本地开发环境…

    2025年12月24日
    000
  • VSCode如何使用HTML插件_高效开发环境配置【技巧】

    VSCode中HTML开发需配置五项功能:一、启用内置HTML语言支持;二、配置Emmet实现快捷展开;三、安装Live Server插件实现自动刷新预览;四、启用Auto Rename Tag同步修改成对标签;五、配置Prettier实现HTML格式自动化。 如果您在VSCode中编写HTML文件…

    2025年12月23日
    000
  • 怎么在vscode中运行html_vscode运行html文件步骤【教程】

    使用Live Server插件可实现实时预览,安装后右键HTML文件选择Open with Live Server即可在浏览器中自动打开并实时刷新页面。 如果您在使用 VSCode 编辑 HTML 文件,但无法直接查看页面效果,可以通过多种方式快速预览和运行 HTML 文件。以下是具体的操作步骤: …

    2025年12月23日
    000
  • 怎么进入html5编辑_用VSCode/记事本打开.html文件即可进入HTML5编辑【进入】

    最直接编辑HTML5文件的方式是用文本编辑器打开.html文件:一、VSCode右键打开或拖拽加载;二、记事本右键打开并设UTF-8编码;三、VSCode命令面板快速搜索打开。 如果您希望对HTML5文件进行编辑,最直接的方式是使用文本编辑器打开已有的.html文件。以下是具体操作步骤: 一、使用V…

    2025年12月23日
    000
  • vscode设置html5环境_插件配置与代码片段设置【教程】

    若VS Code中HTML文件缺乏语法高亮、智能补全及HTML5结构快速生成,需安装Auto Close Tag、Auto Rename Tag、CSS class IntelliSense和HTML Boilerplate插件,启用Emmet并配置html关联与格式化设置。 如果您在 Visual…

    2025年12月23日
    000
  • 怎么在vscode运行html_vscode运行html步骤【指南】

    答案:在VSCode中运行HTML需安装Live Server扩展。1. 创建并保存HTML文件;2. 安装Ritwick Dey开发的Live Server插件;3. 右键选择“Open with Live Server”即可在浏览器中实时预览,修改后自动刷新。 在 VSCode 中运行 HTML…

    2025年12月23日
    000
  • vscode怎么编译运行html_vscode编译运行html步骤【指南】

    使用Live Server插件可实时预览HTML页面,安装后右键选择Open with Live Server即可在浏览器中查看并支持热重载。 如果您在使用 Visual Studio Code 编辑 HTML 文件,但无法查看页面效果,可能是因为缺少正确的运行环境或配置。以下是几种在 VSCode…

    2025年12月23日
    000
  • vscode怎么运行html代码框架_vscode运行html框架方法【教程】

    使用Live Server插件可快速预览HTML,安装后右键选择“Open with Live Server”即可在浏览器中实时查看页面效果。 如果您在使用 Visual Studio Code 编辑 HTML 文件,但无法直接查看页面效果,可以通过多种方式快速运行并预览 HTML 代码。以下是几种…

    2025年12月23日
    000
  • vscode运行html慢怎么办_解vscode运行html慢问题【技巧】

    使用Live Server插件启动本地服务器预览HTML,禁用非必要扩展以释放资源,优化大体积静态文件引入方式,清除浏览器缓存并切换至高性能浏览器,调整VSCode自动保存与文件监听设置,可显著提升加载速度。 如果您在使用VSCode运行HTML文件时发现加载或预览速度较慢,可能是由于插件配置、浏览…

    2025年12月23日
    000

发表回复

登录后才能评论
关注微信