Vs code автодополнение css

Welcome to ReactCssAutoComplete

This tool will provide intellisense suggestions for CSS classnames defined globally as well as imported classnames. I find myself needing this kind of tool often and couldn’t find any existing ones which perfectly fit my usecase, so built my own! Publishing it in hopes someone else also finds it useful. Contributions very welcome! The rest of this README mostly stolen from code generated during this walkthrough: https://code.visualstudio.com/api/get-started/your-first-extension

Configuration

Currently there are two options for configuration to put into your settings.json : «reactcssautocomplete.globalCss» — Location of globally-available CSS resources, relative to the root workspace folder. «reactcssautocomplete.moduleSearchPaths» — Module search paths, relative to the root workspace folder. node_modules is a very common one, if you import CSS from there.

What’s in the folder

• This folder contains all of the files necessary for your extension.
• package.json — this is the manifest file in which you declare your extension and command.
  • The sample plugin registers a command and defines its title and command name. With this information VS Code can show the command in the command palette. It doesn’t yet need to load the plugin.
  • The file exports one function, activate , which is called the very first time your extension is activated (in this case by executing the command). Inside the activate function we call registerCommand .
  • We pass the function containing the implementation of the command as the second parameter to registerCommand .

  Get up and running straight away

  • Press F5 to open a new window with your extension loaded.
  • Run your command from the command palette by pressing ( Ctrl+Shift+P or Cmd+Shift+P on Mac) and typing Hello World .
  • Set breakpoints in your code inside src/extension.ts to debug your extension.
  • Find output from your extension in the debug console.

  Make changes

  • You can relaunch the extension from the debug toolbar after changing code in src/extension.ts .
  • You can also reload ( Ctrl+R or Cmd+R on Mac) the VS Code window with your extension to load your changes.

  TODO list

  • Reduce the extension size and improve the startup time by bundling your extension.
  • Automate builds by setting up Continuous Integration.
  • Add a linter for classnames in addition to the suggestions
  • Add tests back into this (I removed them for iteration speed)
  • Handle multiple folders — Currently this extension assumes it’s being run from a repository with a single react app, it would be nice to segment by folder!

  Источник

  HTML to CSS completion suggestions

  Default settings are set to html / php >> css / scss / less / sass / stylus flow.
  To change file types you want to get selectors from use HTML to CSS autocompletion extension configuration from command palette or VSCode user settings .

  Extension features

  • Intellisense suggestions/completions for classes and ids from markup documents to CSS , SCSS , Less , Sass , Stylus stylesheets
  • Configuration of file types , files , folders or workspaces to work with

  How to configure

  • Enter HTML to CSS autocompletion: Extension Configuration from the command palette
  • Or find html-to-css-autocompletion configuration entries in VSCode user settings

  Configuration options

  • html-to-css-autocompletion.triggerCharacters Shows completion list only on ‘#’/’.’ character entries. Default: disable
  • html-to-css-autocompletion.autocompletionFilesScope
    Defines scope for extension to work with. Options :
    multi-root : all selectors found within all root folders will be visible to defined stylesheets. This is Default autocompletion provider’s scope.
    workspace : all selectors found within particular workspace folder/project will be visible to stylesheets within that workspace folder.
    linked files : selectors will be provided only for linked stylesheets.
  • html-to-css-autocompletion.getSelectorsFromFileTypes
    Defines file types to be searched for classes and ids. Default: html, php
  • html-to-css-autocompletion.folderNamesToBeIncluded
    Defines only specific folder names to be searched. Default: »
  • html-to-css-autocompletion.folderNamesToBeExcluded
    Defines folder names to be excluded from being searched. Default: node_modules
  • html-to-css-autocompletion.includePattern
    Set custom glob pattern to get classes/ids from matched files. E.g.: **//*.
  • html-to-css-autocompletion.excludePattern
    Set custom glob pattern to exclude search on pattern matches. E.g.: **//**

  Contribute

  If you have any issues or would like to contribute to the development of this extension please drop by at github/github issues.

  Forks, pull request are welcome.

  Donate

  If you find this extension helpful consider donating to help keep it alive.

  You can become a member at patreon or check sponsor button at github page for more donation options.

  Источник

  Visual Studio Code CSS Intellisense for HTML

  You can view a list of id and class attribute suggestions via ctrl + space .

  Linked and Embedded Style Sheets

  Linked [] and embedded [ ] style sheets are used in completion for id and class attributes. Links support local and remote files. Absolute local file paths are relative to the workspace folder while others are relative to HTML file:

  All local links point to the same file which is in the root of workspace folder:

  Template Inheritance

  Template inheritance is supported for the following tags:

  Styles defined in base.html will also be available for completion in home.html :

  Additional Style Sheets

  If it is not possible to specify local or remote styles in HTML or via template inheritance, they can be specified in VS Code settings per workspace folder in .vscode/settings.json and will suggest for all HTML files within that workspace folder.

  Example

  .vscode/settings.json

  All relative paths will be evaluated relative to the file being edited. $ will be replaced with the file name of the file being edited without extension.

  Supported Languages

  Supported languages can be configured with the css.enabledLanguages setting. By default html is enabled:

  Extension can be configured to support any language where it makes sense such as nunjucks , twig , mustache , etc. You should also install corresponding language extension which registers the language id in VS Code.

  This setting is application scoped and changing the setting requires restarting VS Code.

  Commands

  Validate Attributes

  Validates all id and class attributes in the active editor.

  Clear Cache

  Installation

  Extension can be installed from Visual Studio Code Marketplace.

  Источник

  Читайте также:  Таблицы