VSCode编译器

2020-09-14  本文已影响0人  张先觉

# 常用插件

Material Theme编译器外观主题插件。
Perttier - Code formatter代码格式器,记得,设置VSCode编译器的Format On Save自动保存并格式化

Prettier失效问题(vscode右下角是否有Prettier√):在vscode中,右键选择“使用…格式化文档”,确认默认格式化程序,即可!解决多个格式化程序冲突,导致Prettier失效的问题。

需要创建.prettierrc 文件覆盖本地配置:
{ 
  "printWidth": 80, // 每行代码长度(默认80)
  "tabWidth": 2, // 每个tab相当于多少个空格(默认2)
  "useTabs": false, // 是否使用tab进行缩进(默认false)
  "singleQuote": true, // 使用单引号(默认false)
  "semi": true, // 声明结尾使用分号(默认true)
  "trailingComma": "all", // 多行使用拖尾逗号(默认none)
  "bracketSpacing": true, // 对象字面量的大括号间使用空格(默认true)
  "jsxBracketSameLine": false, // 多行JSX中的>放置在最后一行的结尾,而不是另起一行(默认false)
  "arrowParens": "avoid" // 只有一个参数的箭头函数的参数是否带圆括号(默认avoid)
  "endOfLine": "auto"// <lf|crlf|cr|auto> lf仅\n换行、"crlf"-回车符+换行符(\r\n)
};



需要创建.prettierignore文件忽略要格式化的文件
# 忽略全部css文件,但是border.css除外
*.css
!border.css

# 忽略commons.js的格式化。手动维护
common.js

Bracket Pair Colorizer颜色括号,方便查看代码。
Auto Rename Tag自动重命名HTML标签,提升工作效率。
CSS peek快速查找CSS样式类,提升工作效率。
Live Server本地服务器运行HTML文件。
javascript console utils快速生成console.log(),节省时间;ctrl+shift+[L | D]
JavaScript Snippet Packjs语法缩写,例如:“cl > console.log()




非必备插件

Power Mode: 打字特效,纯属娱乐、解乏。

// 首选项 > 设置,搜索todo-tree > setting.json
"powermode.enabled": true,
"powermode.presets": "fireworks",
"powermode.enableShake": false

Todo Tree: 代办树,用于标记等待处理BUG等文件,提升工作效率。

// 首选项 > 设置,搜索todo-tree > setting.json
{
    "todo-tree.highlights.defaultHighlight": {  // 默认标签
        "icon": "alert",  // 图标
        "type": "text",  // 注释类型
        "foreground": "#d9bac2",  //  文字颜色
        "background": "#902034",  // 背景色
        "opacity": 50,
        "iconColour": "#a2041e" // 图标颜色
    },
    "todo-tree.highlights.customHighlight": {  // 定制标签
        "BUG": {
            "icon": "bug"
        },
        "TODO": {  
            "icon": "flame",
            "iconColour": "#ffd205"
        }
    }
}
上一篇下一篇

猜你喜欢

热点阅读