vs code 工具HTML、css、javaScript、Vue、等代码插件安装

8 篇文章 0 订阅
5 篇文章 0 订阅

增加一个配置Git码云配置:

1、安装Git: 下载

2、讲 Git 添加到电脑环境变量,

3、打开vscode 按快捷键:CTRL+SHIFT+P 搜索 Git:克隆

4、复制项目的地址粘贴即可。多给点评论后期就出个视频教程

less代码生成配置:安装 Easy LESS 查看 将下面代码复制到sttings配置中:

"less.compile": {

      "compress": false, // 是否删除多余空白字符

      "sourceMap": false, // 是否创建文件目录树,true的话会自动生成一个 .css.map 文件

      // "out": "${workspaceRoot}\\", // 输出文件目录 这里为css文件夹

      // "out": "${workspaceRoot}\\css\\", // 输出文件目录 这里为css文件夹

      "out":true,

      "outExt": ".css", // 输出文件的后缀,默认为.css 如果是微信小程序后缀为.wxss

    },

    "compile-hero.disable-compile-files-on-did-save-code": false,

    "compile-hero.jade-output-toggle": false,

    "compile-hero.javascript-output-toggle": false,

    "compile-hero.less-output-toggle": false,

    "compile-hero.notification-toggle": false,

    "compile-hero.pug-output-toggle": false,

    "compile-hero.sass-output-toggle": false,

    "compile-hero.scss-output-toggle": false,

    "compile-hero.stylus-output-toggle": false,

    "compile-hero.typescript-output-toggle": false,

    "compile-hero.typescriptx-output-toggle": false,

VS code软件下载自行官网下载安装即可:Visual Studio Code - Code Editing. Redefined

 下面开始安装插件:

1、Bracket Pair Colorizer 2 括号提示,颜色渐变 添加到settings.json配置文件中:

"workbench.startupEditor": "none",

"bracket-pair-colorizer-2.depreciation-notice": false,

"editor.bracketPairColorization.enabled": true,

"editor.guides.bracketPairs":"active",

"bracket-pair-colorizer-2.colors": [

"Gold",

"Orchid",

"LightSkyBlue"

],

"bracket-pair-colorizer-2.activeScopeCSS": [

"borderStyle : solid",

"borderWidth : 1px",

"borderColor : {color}",

"opacity: 0.5"

],

"bracket-pair-colorizer-2.scopeLineCSS": [

"borderStyle : solid",

"borderWidth : 1px",

"borderColor : {color}",

"opacity: 0.5"

]

2、Auto Rename Tag  更改标签时,闭环标签同时修改

3、HTML CSS Support 这个时CSS代码提示 

4、HTML Snippets 这个html代码提示 

 5、JavaScript(ES6) code snippets 这个时常规安装

6、Live Server 这个功能就强大了,个人比较推荐,修改代码后自动保持并渲染到浏览器上需要修改配置文件:

         vs code 点击小齿轮 在Settings中搜索 :

                1、files:Auto Save将值更改为afterDelay, 这个是设置自动保存

                2、files: Auto Save Delay 默认值为:1000这个是自动保存时间,可更改

7、Material Icon Theme这个更改vscode软件图标,个人比较推荐 

8、Path Intellisense 这个是路径提示插件推荐安装,插入图片时自动提示图片路径 

9、Vetur 这个是vue插件个人学习用的 

10、Vue 3 Snippets 这个是vue插件个人学习用的 ,代码提示

11、Python 

12、python indent 

13、autoDocstring 

14、django 

2023年整理:

python
Material Theme
Material icon Theme
Bracket Pair Colorizer    需要设置:editor.bracketPairColorization.enabled = true
Highlight Matching Tag
image Preview
EditorConfig for VS Code
Codelf
Prettier-Code formatter
vscode-json
Regex Previewer
//前端
npm lntellisense
Turbo Console log
css-auto-prefix
CSS Peek


vue 3.2
Vite
Vetur
Vue 3 Snippets
TSLint
ESLint
GitLens
Path Intellisense
Better Comments

sass

Sass/Less/Stylus

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

cyz141001

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值