个人VSCode插件&配置(js,css兼容,vue,stylus)

最新推荐文章于 2025-03-07 21:19:50 发布

Red_Xx

最新推荐文章于 2025-03-07 21:19:50 发布

阅读量1w

点赞数 4

分类专栏： VSCode

本文链接：https://blog.csdn.net/a578024797/article/details/80935799

版权

VSCode 专栏收录该内容

3 篇文章

订阅专栏

个人VSCode插件&配置

前言

公司电脑炸了,VS用不了只能重新配置了,之前的整理很烂,这个可以直接用.筛选了许多,多余的插件 ,随时更新

插件

Chinese (Simplified) Language Pack for Visual Studio Code --汉化
ESLint --代码规范检测
HTML CSS Support -- css提示辅助可根据引入css自动查找class(编辑器不带)
language-stylus -- stylus语法提示与高亮
Manta's Stylus Supremacy --格式化stylus的代码
open in browser --html在默认浏览器中打开 ALT+B
Path Intellisense --路径自动补全 ./
Prettier - Code formatter --美化代码(我只用到了在ALT SHIFT F 中双引号变单引号)
Project Manager -- 管理项目方便切换 (Alt shift p 切换 /ctrl shift p 保存)
Vetur -- Vue语法高亮格式化代码
vscode-icons -文件图标美化
Vue VSCode Snippets --vue代码块
Bracket Pair Colorizer --括号颜色
px2rem -- 把px转换成rem 因为saber才用的~~~
autoprefixer -- 把css文件里的属性加上兼容性 (公众号项目未用打包工具) 需要先在keybindings.json中加上{"key": "ctrl+shift+c", "command": "autoprefixer.execute"} 绑定下快捷键
Easy Less -- 用来操作输出less
Live Server 模拟启动服务打开html

Settings

编辑器tab 两个空格;编辑器可视区域折行;文件自动保存;格式化js双引号变单引号;eslint保存自动修复;vue template模板格式化,vue 标签多跳属性折行(prettyhtml多条属性不能折行),stylus 格式化设置;

{
  //这个等于false editor.tabSize才生效
  "editor.detectIndentation": false,
  //tab空格数
  "editor.tabSize": 2,
  //失去焦点自动保存
  "files.autoSave": "onFocusChange",
  "window.zoomLevel": 1,
  //使用VS code-icons图标
  "workbench.iconTheme": "vscode-icons",
  //可视区域折行
  "editor.wordWrap": "on",
  //Prettier
  //格式化的时候双引号变单引号
  "prettier.singleQuote": true,
  //Manta's Stylus Supremacy配置如下
  // 是否插入冒号
  "stylusSupremacy.insertColons": true,
  // 是否插入分好
  "stylusSupremacy.insertSemicolons": false,
  // 是否插入大括号
  "stylusSupremacy.insertBraces": false,
  // import之后是否换行
  "stylusSupremacy.insertNewLineAroundImports": false,
  // 两个选择器中是否换行
  "stylusSupremacy.insertNewLineAroundBlocks": false,
  //eslint配置如下
  //eslint 保存自动格式化
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  //eslint 作用文件
  "eslint.validate": [
    "html",
    "vue",
    "javascript",
    "jsx"
  ],
  //vetur
  //格式化vue template模板
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      //设置标签内多个属性折行
      //Wrap attributes to new lines [auto|force|force-aligned|force-expand-multiline]
      "wrap_attributes": "force-expand-multiline"
    }
  },
  //px2rem
  //根目录font-size，默认：16px
  "px2rem.rootFontSize": 23.4375,
  //rem保留小数位数，默认：6位。
  "px2rem.fixedDigits": 2,
  //是否开启注释，默认：true
  "px2rem.isNeedNotes": false,
  //autoprefixer
  //兼容浏览器版本
  "autoprefixer.browsers": [
    "last 2 versions",
    "ios >= 8",
  ],
  "less.compile": {
    "compress": false, // 是否删除多余空白字符
    "sourceMap": false, // 是否创建文件目录树，true的话会自动生成一个 .css.map 文件
    "out": true, // 是否输出css文件，false为不输出
    "outExt": "css" // 输出文件的后缀,默认为.css
  }
}