vscode实用配置、常用插件

这篇具有很好参考价值的文章主要介绍了vscode实用配置、常用插件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、配置自动保存

文件--首选项--设置--输入“自动保存”

在Files:Auto Save中  选择afterDelay

在Files: Auto Save Delay中配置延迟保存的时间

vscode代码格式化插件,vscode,ide,编辑器

二:插件vetur

常用功能:

1、使.vue代码高亮

安装激活vetur插件, 代码就有高亮,显示彩色

不仅仅vue文件,vetur还支持很多语言的代码高亮,如下:

vscode代码格式化插件,vscode,ide,编辑器

2、格式化代码

快捷键:shift + alt + f

3、添加格式化的配置

文件--首选项--设置--

vscode代码格式化插件,vscode,ide,编辑器

 在js-beautify-html中添加需要的配置(根据自己喜好)vscode代码格式化插件,vscode,ide,编辑器

 vscode代码格式化插件,vscode,ide,编辑器

三:eslint

为什么要用eslint,主要考虑多人协同开发同一个项目时,保持代码风格的统一。如果靠个人自觉代码规范,其实很难做好,费时费力且效果不好。如果用eslint自动规范,那么代码风格统一将会是一件相对容易的事情。

不同的开发人员,其使用的开发工具可能还一样,不同人的开发工具可能配置的代码风格也不同,如一个人在vscode设置了tabSize为2,另一个配置了4,这样就会风格不容易统一,但是我们可以通过eslint自动检测,统一大家使用tabSize为2,配置文件上传到项目当中,这样每个人拉取代码后,都会统一使用一套规则,非常方便。

1、安装eslint

全局安装:

npm i eslint -g

项目安装:

npm i eslint -D

但为了方便多人协同开发同一个项目,推荐使用项目安装

2、创建eslint的配置文件.eslint.js

配置eslint的规则可以使用如下两个文件之一:

文件.eslint.js

文件package.json

推荐使用文件.eslint.js,因为它使用的是js语法,且可以设置环境变量,可以据此动态设置一些属性,还可以添加注释,比package.json更加灵活。

如果这两个文件同时存在,文件.eslint.js的优先级更高。

创建文件.eslint.js可在终端输入:

./node_modules/.bin/eslint --init

// 或者

npm init @eslint/config

3、添加你需要的eslint规则

eslint规则非常多,但通常我们并不需要那么多,可以根据自身情况,选择需要的eslint规则,

这里贴出我常用的规则:

module.exports = {
    // 默认情况下,Eslint会在所有父级目录里寻找配置文件,一直到根目录。如果发现配置文件中有 "root": true,它就会停止在父级目录中寻找
    "root": true,
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    // 下面这些rules是用来设置从插件来的规范代码的规则,使用必须去掉前缀eslint-plugin-
    // 主要有如下的设置规则,可以设置字符串也可以设置数字,两者效果一致
    // 第一个参数: "off" -> 0 关闭规则; "warn" -> 1 开启警告规则; "error" -> 2 开启错误规则
    // 第二个参数:always(默认):允许; never:不允许
    "rules": {
        'no-console': process.env.NODE_ENV && process.env.NODE_ENV.trim() === 'production' ? 'warn' : 'off', // 禁止使用console
        'no-alert': 1, // 禁止使用alert confirm prompt
        "indent": 0,  // 缩进
        'space-before-function-paren': [0, 'always'], // 函数定义时括号前面要不要有空格
        'eqeqeq': 1, // 必须使用全等
        'no-var': 1, // 禁用var,用let和const代替
        'no-multiple-empty-lines': [1, {"max": 2}], // 空行最多不能超过2行
        'semi': [1, 'always'], // 语句强制分号结尾
    }
};

更加详细的规则可以看这里,别人总结的非常全面,也可以网上自行查阅

4、添加忽略文件.eslintignore

忽略一些不需要eslint检查的文件

/dist
/node_modules

5、eslint默认只支持检测js文件,不支持css,html等语言,如果需要检测其它类型的文件就需要安装并指定对应的处理器,有点类似webpack的loader,比如要设置检查vue文件,需要安装插件:eslint-plugin-vue

四:git-commit-plugin

解决痛点:团队开发项目,提交git时写说明总是不规范,有些写的详细,有些写的又很简单,没有固定格式,那么这个插件正可以解决这个痛点。

 vscode插件市场直接搜索就可以搜到

vscode代码格式化插件,vscode,ide,编辑器

安装后,这里会有一个小熊猫图标

vscode代码格式化插件,vscode,ide,编辑器

点击一下这个图标就可以使用该插件了

首先,可以先选择提交类型

vscode代码格式化插件,vscode,ide,编辑器

填写描述后,选择Complete 即完成本次修改(Esc则离开输入):

vscode代码格式化插件,vscode,ide,编辑器

提交本次修改之后,push到远程仓库即可看到提交 

 文章来源地址https://www.toymoban.com/news/detail-697062.html

 

到了这里,关于vscode实用配置、常用插件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vscode 配置rust、golang代码格式化方法

    点击左下角齿轮按钮,点击Settings,如下图: 点击右上角切换到Settings.json文件。如下图 增加rust、golang 配置如下,假如存在默认格式化配置请注释或删除。 重启vscode ide, ​ 尝试编写rust、golang 代码,然后按cmd/control+s 按钮保存,即可自动格式化代码。        

    2024年02月08日
    浏览(58)
  • [HBuilderX开发uniapp]自动代码格式化插件安装及配置

    目录 一、前言 二、插件位置 1.在HBuilderX中找到工具------插件安装​ 2.点击“安装新插件”------\\\"前往插件市场安装\\\"  3.插件市场搜索eslint-----点击下载------使用HBuilderX导入插件  三、小结 四、补充 HBuilderX作为H5 web开发的IDE其使用的普及化大幅提高,在应用中为使代码更加优美

    2023年04月08日
    浏览(49)
  • VSCode 配置 python 代码格式化工具(yapf,autopep8)

    需要注意的是,yapf的配置选项都是可选的,你可以根据自己的需要选择使用哪些选项。不过,使用太多选项可能会导致代码格式化的规则变得复杂,对代码的可读性有影响。因此,建议尽量使用最少的选项来保持代码的简洁性。 aggressive: 这个选项表示在格式化代码时使用更

    2024年02月09日
    浏览(95)
  • VSCODE-Verilog开发插件/(代码格式化+Verilog文件树显示+一键例化+UCF转XDC+代码错误检查+语法高亮)

    VSCODE插件,可实现功能: 变量对齐 逗号对齐 括号对齐 快捷键:CTRL + L 例化的代码自动复制到剪切板 快捷键:ctrl+shift+p :输入 Convert_instance 正常顺序转换 可实现序号的从小到大的排列 快捷键:ctrl+shift+p :输入 Convert UCF to XDC NORMAL ORDER 或 Convert UCF to XDC SORT ORDER ucf, xdc, do, tcl 语法

    2024年03月10日
    浏览(50)
  • vscode中怎样格式化js代码_vscode如何格式化代码

    vs code格式化代码的快捷键如下: 在Mac上 Shift+ Option+F 在Ubuntu上 Ctrl+ Shift+I 但是自带的格式化并不能满足我的需求,这个时候,不得不说插件大法好。 代码格式化为eslint风格 需要插件:eslint

    2024年02月16日
    浏览(77)
  • vscode设置Prettier为默认格式化插件

    1. 目的:ctrl+s保存,自动格式化文档 2. 所需插件Prettier 3. 操作步骤 先打开vscode软件,左下角点击设置 — 打开设置 ---- 在右上方有一个搜索框。 先设定自动保存文件,搜索框贴入 files.autoSave 筛出设置项,并把设置项属性选择为 onFocuschange 。 设定编辑器默认代码格式化(美化

    2024年02月06日
    浏览(58)
  • vscode 无法格式化python代码、无法格式化C++代码(vscode格式化失效)另一种解决办法:用外部工具yapf格式化(yapf工具)

    神马情况,我的vscode死活不能格式化python代码,还有C++代码也不能格式化,json代码都能格式化,为啥到python、C++就不行了。。。。 (格式化json代码) (格式化python代码) 都无反应。。。 弄了半天解决不了。。。只能用外部工具解决了,就是麻烦点 搞了个外部工具yapf来格

    2024年02月05日
    浏览(85)
  • vscode 格式化代码

    在 Visual Studio Code 中,你可以使用以下步骤来格式化代码: 打开你的代码文件。 选择你要格式化的代码部分或按  Ctrl+A  来全选。 按下  Shift+Alt+F ,这会触发 \\\"格式化文档\\\" 的命令。 如果你的键盘布局没有 \\\"Alt\\\" 键,或者你的快捷键与其他系统不同,你可能需要自定义或查阅

    2024年01月18日
    浏览(58)
  • 使用vscode格式化文档无效(vue代码格式化文档无效)

    问题: 最近在写代码的时候,vscode使用格式化文档不管用。 原因: 单页面使用大量element组件和html代码导致,vscode识别不了。 解决方案: 1、 打开设置,点击右侧的图标打开settings.json文件,在文件中注入代码。 settings.json文件位置,vscode左下角:  设置页面右上角:  在

    2024年02月16日
    浏览(76)
  • VsCode 格式化代码风格

           最近在用vscode写代码,由于 代码在服务器上 ,所以我是 通过remote-ssh 插件 远程 到linux的虚拟机上。之前用的是vscode 1.67的版本,后面升级到了vscode最新的 1.85版本,发现格式化代码不起作用了。后来研究了一下。        首先格式化代码是通过 clang-format这个工具进行

    2024年04月23日
    浏览(75)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包