vscode 常用设置

 

by:授客 QQ1033553122

 

版本

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文件时,按提示操作,再配置下默认格式化器就好

vscode 常用设置的更多相关文章

  1. vscode 常用设置与插件推荐

    1.Chinese (Simplified) Language Pack for Visual Studio Code 适用于 VS Code 的中文(简体)语言包 2.Color Info Visu ...

  2. webstorm vscode 常用设置

    webstorm常用的设置及操作图解 VS Code 新建vue文件初始化模板 VSCode新建vue文件自定义模板

  3. vscode常用设置

    1.代码提示快捷键设置:(keybindings.json) { "key": "ctrl+j","command": "edit ...

  4. vscode常用快捷键及常用设置

    快捷键 ctrl+b 切换侧边栏 ctrl+\ 拆分编辑器 ctrl+鼠标滚轮 缩放编辑器的字体 alt+shift+f 整理代码格式 alt+z 切换自动换行 ctrl+· 打开终端调试 ctrl+ ...

  5. linux云服务器常用设置

    前面的话 由于在云服务器上配置自己的网站,将Linux里的常用设置记录如下 更改shell 默认地, ubuntu系统默认的shell是dash,但更常用的shell是bash 通过下面命令可以将da ...

  6. VSCode常用插件之vscode-stylelint使用

    更多VSCode插件使用请访问:VSCode常用插件汇总 vscode-stylelint这是一个检验CSS/SASS/LESS代码规范的插件. StyleLint 使用指南 vscode-style ...

  7. VSCode常用插件之ESLint使用

    更多VSCode插件使用请访问:VSCode常用插件汇总 ESLint这是VS Code ESLint扩展,将ESLint JavaScript集成到VS Code中. 首先简单说一下使用流程: 1. ...

  8. VSCode常用插件之EditorConfig for vs code 使用

    更多VSCode插件使用请访问:VSCode常用插件汇总 当大家在公司工作时,不可能永远是一个人维护一个项目,当多个人参与一个项目,每个人使用的编辑器不一样,代码风格自然也不一样,那么如何让使用不同编 ...

  9. vscode常用插件快捷键

    俗话说,工欲善其事必先利其器,我们码农的器是什么尼?没错,就是我们亲爱的IDE,前端开发者最爱的编辑器应该是vscode了吧.但是我们要怎么去锋利它尼?不外乎就是熟悉它的使用方法.快捷键以及第三方的插 ...

  10. vscode常用快捷键及插件

    macOS 全局 Command + Shift + P / F1 显示命令面板 Command + P 快速打开 Command + Shift + N 打开新窗口 Command + W 关闭窗口 ...

随机推荐

  1. 阿里巴巴 MySQL 数据库之索引规约 (二)

    索引规约 强制部分 [强制] 业务上具有唯一特性的字段,即使是多个字段的组合,也必须建成唯一索引. 说明:不要以为唯一索引影响了 insert 速度,这个速度损耗可以忽略,但提高查找速度是明显的:另外 ...

  2. C# WinForm控件及其子控件转成图片(支持带滚动条的长截图)

    概述(Overview) 参考了网上的分析,感觉都不太理想:1.一个控件内如果包含多个子控件时没有考虑顺序问题:2.超出控件可显示区域时不能长截图,有滚动条会多余截取了滚动条.这个随笔旨在解决这个问题 ...

  3. scala的基本语法

    区分常量和变量 常量 变量 写一行代码,写多行代码,终端代码 数据类型 byte char short int long float double boolean  数据类型与java相似,但与jav ...

  4. Vue.js 动画与过渡效果实战

    title: Vue.js 动画与过渡效果实战 date: 2024/6/4 updated: 2024/6/4 description: 这篇文章介绍了如何在网页设计中使用过渡动画和组件效果,以及如 ...

  5. react 高阶函数

    HOC(Higher Order Components)就是一个函数,传给它一个组件,它返回一个新的组件. 高阶组件:就相当于手机壳,通过包装组件,增强组件功能. 实现步骤: 首先创建一个函数 指定函 ...

  6. react props进阶 children属性

    children属性,表示组件标签的子节点,当组件标签有子节点时,props就会有该属性,与与普通的props一样,其值可以使任意类型. # 父组件 class App extends React.C ...

  7. CSP-S2023 题解

    CSP-S 2023 题解 密码锁 发现总状态数只有 \(10^5\) 个,枚举 \(O(n)\) 暴力判断即可,复杂度 \(O(10^5 n)\). 或者每一个状态只对应了 \(81\) 个状态,枚 ...

  8. xv6 磁盘中断流程和启动时调度流程

    首发公号:Rand_cs 本文讲述 xv6 中的一些细节流程,还有对之前文中遗留的问题做一些补充说明,主要有以下几个问题: 一次完整的磁盘中断流程 进入调度器后的详细流程 sched 函数中的条件判断 ...

  9. springboot3时代创建springboot2程序项目

    springboot3时代创建springboot2程序项目 目前,IDEA,springboot 官网,都不能创建基于JDK8(JDK1.8)的springboot程序了. 解决办法: 1. 先在官 ...

  10. php监控

    1.开启php的监控数据监控功能 # 使用部署了php-fpm的机器即可 # yum install php-fpm -y # 1.修改参数 [root@web-7 /etc/php-fpm.d]#g ...