vscode 常用设置

简介: vscode 常用设置


vscode
常用设置

版本

vscode Version: 1.33.1

 

1.   自动保存文件设置

 

 

文件编辑一秒钟过后自动保存

 

 

 

2.   黏贴后、保存完、输入完后自动化格式

 

 

 

3.   代码行可容纳字符数及换行设置

 

 

 

bounded 超过word Wrap Column设置的字符数、达到视口最小宽度,则换行

 

4.   tab键自动转为插入空格(默认就是勾选的)

 

 

 

5.   取消根据打开文件的内容自动设置Editor:Tab SizeEditor:insert Space的值

 

 

6.   插件安装与配置

 

 

 

Eslint插件安装(Javascript语法检测推荐使用)

一个javascript语法规则和代码风格的检查工具。

 

打开界面中,输入Eslint,搜索结果中点击install

 

 

 

插件配置

自动修复配置

 

 

 

Prettier - Code formatter插件安装

Prettier - Code formatter:只关注格式化,并不具有eslint检查语法等能力,只关心格式化文件(最大长度、混合标签和空格、引用样式等),包括JavaScript,Flow,TypeScript,CSS,SCSS,Less,JSX,GraphQL,JSON,Markdown。

注意:针对该插件,输入完自动格式化设置不起作用,需要按Ctrl+s才会格式,另外,似乎不支持Vue

 

 

 

插件配置

集成Eslint

 

 

 

tab空格数配置

 

 

 

去掉每行代码结尾的分号

 

 

 

设置每行可容纳字符数

 

 

 

Vetur插件安装(Vue格式化推荐使用)

支持格式化vue

 

 

 

插件配置

设置插件默认的格式化器

 

 

 

tab设置

 

 

 

vue-beautify插件安装(Vue格式化推荐使用)

 

 

 

 

7.   默认格式化器设置

选中要格式化的代码,按Alt+Shift+F,如下,未设置默认格式化器的时候,会弹出来以下提示,点击config

 

 

 

(搜索)选择要使用的格式化器(例子圈选部分),点击

 

 

 

当然,也可以右键选择Fortmation Selection With,打开以上界面

备注:Fortmation Selection 打开右下角的config提示

 

 

 

为了避免麻烦,我们可以设置我们安装的格式化插件为默认格式化器,该格式化插件会优先于其他格式化器被用于格式化,但是实践发现,当使用如下红色选框圈选时的格式化器作为默认格式化器时,格式化vue代码不起作用。解决方案是设置为null。个人理解,当设置为null时,会自动匹配最佳格式化器,然后格式化js文件时,按提示操作,再配置下默认格式化器就好

 

 

 

  

目录
相关文章
|
6月前
vscode 向下复制当前行功能快捷键 设置成Ctrl + D
vscode 向下复制当前行功能快捷键 设置成Ctrl + D
298 0
|
6月前
设置VSCode运行任务命令快捷键Alt+R,通常用于npm start(对频繁使用该命令可节省50%的输入命令行打字时间)
设置VSCode运行任务命令快捷键Alt+R,通常用于npm start(对频繁使用该命令可节省50%的输入命令行打字时间)
|
6月前
设置VSCode代码编辑器右侧的Minimap代码缩略图滚动条切换显示、隐藏的快捷键Alt+M
设置VSCode代码编辑器右侧的Minimap代码缩略图滚动条切换显示、隐藏的快捷键Alt+M
|
11天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
131 4
2022最新最详细必成功的在Vscode中设置背景图、同时解决不受支持的问题
这篇文章提供了在VScode中设置背景图的详细步骤,包括下载background插件、编辑setting.json文件、配置背景样式,并解决了设置后出现的不支持提示的问题。
2022最新最详细必成功的在Vscode中设置背景图、同时解决不受支持的问题
Vscode设置标签页多行显示
这篇文章提供了在VSCode中设置标签页多行显示的方法,以提高编辑效率。
Vscode设置标签页多行显示
|
3月前
|
编译器 C++
VS Code设置C++编译器路径
VS Code设置C++编译器路径
45 0
|
4月前
|
开发工具 git
vscode设置 git提交代码忽略node_modules,dist,vscode如何设置不提交node_modules,dist
vscode设置 git提交代码忽略node_modules,dist,vscode如何设置不提交node_modules,dist
450 0
|
4月前
|
前端开发 JavaScript 开发工具
vscode教程(含使用技巧、保存时自动格式化文件等设置)
vscode教程(含使用技巧、保存时自动格式化文件等设置)
310 0
|
5月前
|
Linux 网络安全 数据安全/隐私保护
VsCode SSH远程设置不用重复输入密码
VsCode SSH远程设置不用重复输入密码
下一篇
无影云桌面