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

                                        个人VSCode插件&配置

 

前言

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

插件

1. Chinese (Simplified) Language Pack for Visual Studio Code          --汉化
2. ESLint  --代码规范检测
3. HTML CSS Support   -- css提示辅助 可根据引入css自动查找class(编辑器不带)
4. language-stylus   -- stylus语法提示与高亮
5. Manta's Stylus Supremacy   --格式化stylus的代码
6. open in browser   --html在默认浏览器中打开 ALT+B
7. Path Intellisense   --路径自动补全 ./
8. Prettier - Code formatter   --美化代码(我只用到了在ALT SHIFT F 中 双引号 变单引号)
9. Project Manager    -- 管理项目 方便切换 (Alt shift p 切换 /ctrl shift p 保存)
10. Vetur    -- Vue语法高亮 格式化代码
11. vscode-icons    -文件图标美化
12. Vue VSCode Snippets    --vue代码块
13. Bracket Pair Colorizer     --括号颜色
14. px2rem    -- 把px转换成rem 因为saber才用的~~~

15. autoprefixer    -- 把css文件里的属性 加上兼容性 (公众号项目未用打包工具)  需要先在keybindings.json中加上{"key": "ctrl+shift+c", "command": "autoprefixer.execute"} 绑定下快捷键

16. Easy Less   -- 用来操作输出less

17. 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
  }
}