README.md · Gitee 极速下载/fabulous - Gitee.com

开源项目 > 插件和扩展 > Visual Studio Code 扩展 &&

加入 Gitee

与超过 1200万开发者一起发现、参与优秀开源项目，私有仓库也完全免费：）

此仓库是为了提升国内下载速度的镜像仓库，每日同步一次。原始仓库： https://github.com/Raathigesh/fabulous

克隆/下载

README.md 4.49 KB

<div  align="center">
<img src="https://affectionate-booth-10a1f4.netlify.com/banner.png" />
<br />
</div>
<br />

Fabulous introduces a CSS properties sidebar into Visual Studio Code.

Fabulous supports the followings

- 💅 CSS-in-JS libs which supports template literal ([styled-components](https://github.com/styled-components/styled-components), [emotion](https://github.com/emotion-js/emotion), [linaria](https://github.com/callstack/linaria))
- 🎨 CSS rules from `.css` files
- 🌈 CSS rules from `.scss` files
- 🌏 CSS rules from `.html` files - these must be in a `<style>` tag and the style tag must be within the `<head>` tag
- 🌛 CSS rules from `component.ts` Angular component files that have inline styles within the ` @Component({ styles:[``] }) ` decorator
- 🌟 CSS rules from `.vue` files that have a `<style>` tag in the root of the file
- 💍 CSS rules from `.svelte` files that have a `<style>` tag in the root of the file

> Fabulous is still in Preview. Give it a try and [let us know](https://github.com/Raathigesh/fabulous/issues) when things don't go well.

## Getting started

- Install the [Fabulous](https://marketplace.visualstudio.com/items?itemName=Raathigeshan.fabulous) extension in VS Code
- After opening a `css`, `scss`, `js`, `jsx`, `tsx`, `component.ts`, `vue` or `svelte` file, click on the <img src="https://affectionate-booth-10a1f4.netlify.com/tiny-icon.png" width="20px" /> icon to toggle the side-bar
- Place your cursor in a CSS rule or in a Styled component template literal
- You should see the sidebar controls become active

## Help us make Fabulous better

Have a look at our [contribution guide](./contributing.md).

## Contributors

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<table>
  <tr>
    <td align="center"><a href="https://github.com/threepointone"><img src="https://avatars2.githubusercontent.com/u/18808?v=4" width="100px;" alt="Sunil Pai"/><br /><sub><b>Sunil Pai</b></sub></a><br /><a href="#ideas-threepointone" title="Ideas, Planning, & Feedback">🤔</a></td>
    <td align="center"><a href="https://twitter.com/Raathigesh"><img src="https://avatars0.githubusercontent.com/u/3108160?v=4" width="100px;" alt="Raathi Kugarajan"/><br /><sub><b>Raathi Kugarajan</b></sub></a><br /><a href="#ideas-Raathigesh" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/Raathigesh/fabulous/commits?author=Raathigesh" title="Code">💻</a> <a href="#design-Raathigesh" title="Design">🎨</a></td>
    <td align="center"><a href="https://github.com/0xflotus"><img src="https://avatars3.githubusercontent.com/u/26602940?v=4" width="100px;" alt="0xflotus"/><br /><sub><b>0xflotus</b></sub></a><br /><a href="https://github.com/Raathigesh/fabulous/commits?author=0xflotus" title="Documentation">📖</a></td>
    <td align="center"><a href="https://github.com/paustint"><img src="https://avatars2.githubusercontent.com/u/5461649?v=4" width="100px;" alt="Austin Turner"/><br /><sub><b>Austin Turner</b></sub></a><br /><a href="https://github.com/Raathigesh/fabulous/commits?author=paustint" title="Tests">⚠️</a> <a href="https://github.com/Raathigesh/fabulous/commits?author=paustint" title="Code">💻</a> <a href="#maintenance-paustint" title="Maintenance">🚧</a> <a href="https://github.com/Raathigesh/fabulous/issues?q=author%3Apaustint" title="Bug reports">🐛</a> <a href="https://github.com/Raathigesh/fabulous/commits?author=paustint" title="Documentation">📖</a> <a href="#infra-paustint" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#review-paustint" title="Reviewed Pull Requests">👀</a></td>
    <td align="center"><a href="https://twitter.com/igrekov"><img src="https://avatars0.githubusercontent.com/u/13730032?v=4" width="100px;" alt="Ivan"/><br /><sub><b>Ivan</b></sub></a><br /><a href="https://github.com/Raathigesh/fabulous/commits?author=Winner95" title="Code">💻</a></td>
    <td align="center"><a href="https://github.com/mukeshmandiwal"><img src="https://avatars3.githubusercontent.com/u/9495069?v=4" width="100px;" alt="Mukesh Mandiwal"/><br /><sub><b>Mukesh Mandiwal</b></sub></a><br /><a href="https://github.com/Raathigesh/fabulous/commits?author=mukeshmandiwal" title="Code">💻</a></td>
  </tr>
</table>

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

一键复制原始数据按行查看历史

提交于 2019-09-25 03:37 . docs: update README.md

Fabulous introduces a CSS properties sidebar into Visual Studio Code.

Fabulous supports the followings

💅 CSS-in-JS libs which supports template literal (styled-components, emotion, linaria)
🎨 CSS rules from .css files
🌈 CSS rules from .scss files
🌏 CSS rules from .html files - these must be in a <style> tag and the style tag must be within the <head> tag
🌛 CSS rules from component.ts Angular component files that have inline styles within the @Component({ styles:[``] }) decorator
🌟 CSS rules from .vue files that have a <style> tag in the root of the file
💍 CSS rules from .svelte files that have a <style> tag in the root of the file

Fabulous is still in Preview. Give it a try and let us know when things don't go well.

Getting started

Install the Fabulous extension in VS Code
After opening a css, scss, js, jsx, tsx, component.ts, vue or svelte file, click on the icon to toggle the side-bar
Place your cursor in a CSS rule or in a Styled component template literal
You should see the sidebar controls become active

Help us make Fabulous better

Have a look at our contribution guide.

Contributors

Thanks goes to these wonderful people (emoji key):

Sunil Pai

_{Sunil Pai}
🤔

Raathi Kugarajan

_{Raathi Kugarajan}
🤔 💻 🎨

0xflotus

Austin Turner

_{Austin Turner}
⚠️ 💻 🚧 🐛 📖 🚇 👀

Ivan

Mukesh Mandiwal

_{Mukesh Mandiwal}
💻

This project follows the all-contributors specification. Contributions of any kind welcome!

TypeScript

1

https://gitee.com/mirrors/fabulous.git

git@gitee.com:mirrors/fabulous.git

mirrors

fabulous

fabulous

master