add lerna and separate language server package

master
Brad Cornes 2021-06-01 12:37:15 +01:00
parent 94c1942cf4
commit bdb398bf80
43 changed files with 73977 additions and 36519 deletions

3
.gitignore vendored
View File

@ -1,3 +1,2 @@
node_modules
dist
*.vsix
/*.vsix

8
.vscode/launch.json vendored
View File

@ -7,10 +7,10 @@
"request": "launch",
"name": "Launch Client",
"runtimeExecutable": "${execPath}",
"args": ["--extensionDevelopmentPath=${workspaceRoot}"],
"args": ["--extensionDevelopmentPath=${workspaceRoot}/packages/vscode-tailwindcss"],
"stopOnEntry": false,
"sourceMaps": true,
"outFiles": ["${workspaceRoot}/dist/extension/**/*.js"],
"outFiles": ["${workspaceRoot}/packages/vscode-tailwindcss/dist/**/*.js"]
// "preLaunchTask": "npm: dev"
},
{
@ -21,7 +21,7 @@
"protocol": "inspector",
"port": 6011,
"sourceMaps": true,
"outFiles": ["${workspaceRoot}/dist/server/**/*.js"]
"outFiles": ["${workspaceRoot}/packages/vscode-tailwindcss/dist/**/*.js"]
},
{
"type": "node",
@ -31,7 +31,7 @@
"protocol": "inspector",
"port": 6012,
"sourceMaps": true,
"outFiles": ["${workspaceRoot}/dist/server/**/*.js"]
"outFiles": ["${workspaceRoot}/packages/vscode-tailwindcss/dist/**/*.js"]
}
]
}

125
README.md
View File

@ -1,125 +0,0 @@
<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/.github/banner-dark.png" alt="" />
Tailwind CSS IntelliSense enhances the Tailwind development experience by providing Visual Studio Code users with advanced features such as autocomplete, syntax highlighting, and linting.
## Installation
**[Install via the Visual Studio Code Marketplace →](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)**
In order for the extension to activate you must have [`tailwindcss` installed](https://tailwindcss.com/docs/installation) and a [Tailwind config file](https://tailwindcss.com/docs/installation#create-your-configuration-file) named `tailwind.config.js` in your workspace.
## Features
### Autocomplete
Intelligent suggestions for class names, as well as [CSS functions and directives](https://tailwindcss.com/docs/functions-and-directives/).
<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/.github/autocomplete.png" alt="" />
### Linting
Highlights errors and potential bugs in both your CSS and your markup.
<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/.github/linting.png" alt="" />
### Hover Preview
See the complete CSS for a Tailwind class name by hovering over it.
<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/.github/hover.png" alt="" />
### CSS Syntax Highlighting
Provides syntax definitions so that Tailwind features are highlighted correctly.
## Recommended VS Code Settings
VS Code has built-in CSS validation which may display errors when using Tailwind-specific syntax, such as `@apply`. You can disable this with the `css.validate` setting:
```
"css.validate": false
```
By default VS Code will not trigger completions when editing "string" content, for example within JSX attribute values. Updating the `editor.quickSuggestions` setting may improve your experience:
```
"editor.quickSuggestions": {
"strings": true
}
```
## Extension Settings
### `tailwindCSS.includeLanguages`
This setting allows you to add additional language support. The key of each entry is the new language ID and the value is any one of the extensions built-in languages, depending on how you want the new language to be treated (e.g. `html`, `css`, or `javascript`):
```json
{
"tailwindCSS.includeLanguages": {
"plaintext": "html"
}
}
```
### `tailwindCSS.emmetCompletions`
Enable completions when using [Emmet](https://emmet.io/)-style syntax, for example `div.bg-red-500.uppercase`. **Default: `false`**
### `tailwindCSS.colorDecorators`
Controls whether the editor should render inline color decorators for Tailwind CSS classes and helper functions. **Default: `true`**
> Note that `editor.colorDecorators` must be enabled for color decorators to be shown.
### `tailwindCSS.showPixelEquivalents`
Show `px` equivalents for `rem` CSS values in completions and hovers. **Default: `true`**
### `tailwindCSS.rootFontSize`
Root font size in pixels. Used to convert `rem` CSS values to their `px` equivalents. See [`tailwindCSS.showPixelEquivalents`](#tailwindcssshowpixelequivalents). **Default: `16`**
### `tailwindCSS.validate`
Enable linting. Rules can be configured individually using the `tailwindcss.lint` settings:
- `ignore`: disable lint rule entirely
- `warning`: rule violations will be considered "warnings," typically represented by a yellow underline
- `error`: rule violations will be considered "errors," typically represented by a red underline
#### `tailwindCSS.lint.invalidScreen`
Unknown screen name used with the [`@screen` directive](https://tailwindcss.com/docs/functions-and-directives/#screen). **Default: `error`**
#### `tailwindCSS.lint.invalidVariant`
Unknown variant name used with the [`@variants` directive](https://tailwindcss.com/docs/functions-and-directives/#variants). **Default: `error`**
#### `tailwindCSS.lint.invalidTailwindDirective`
Unknown value used with the [`@tailwind` directive](https://tailwindcss.com/docs/functions-and-directives/#tailwind). **Default: `error`**
#### `tailwindCSS.lint.invalidApply`
Unsupported use of the [`@apply` directive](https://tailwindcss.com/docs/functions-and-directives/#apply). **Default: `error`**
#### `tailwindCSS.lint.invalidConfigPath`
Unknown or invalid path used with the [`theme` helper](https://tailwindcss.com/docs/functions-and-directives/#theme). **Default: `error`**
#### `tailwindCSS.lint.cssConflict`
Class names on the same HTML element which apply the same CSS property or properties. **Default: `warning`**
#### `tailwindCSS.lint.recommendedVariantOrder`
Class variants not in the recommended order (applies in [JIT mode](https://tailwindcss.com/docs/just-in-time-mode) only). **Default: `warning`**
## Troubleshooting
If youre having issues getting the IntelliSense features to activate, there are a few things you can check:
- Ensure that you have a Tailwind config file in your workspace and that this is named `tailwind.config.js`. Check out the Tailwind documentation for details on [creating a config file](https://tailwindcss.com/docs/installation#create-your-configuration-file).
- Ensure that the `tailwindcss` module is installed in your workspace, via `npm`, `yarn`, or `pnpm`.
- Make sure your VS Code settings arent causing your Tailwind config file to be excluded from search, for example via the `search.exclude` setting.

1
README.md 120000
View File

@ -0,0 +1 @@
./packages/vscode-tailwindcss/README.md

4
lerna.json 100644
View File

@ -0,0 +1,4 @@
{
"version": "independent",
"packages": ["packages/*"]
}

48261
package-lock.json generated

File diff suppressed because it is too large Load Diff

241
package.json 100755 → 100644
View File

@ -1,243 +1,10 @@
{
"name": "vscode-tailwindcss",
"displayName": "Tailwind CSS IntelliSense",
"description": "Intelligent Tailwind CSS tooling for VS Code",
"preview": true,
"author": "Brad Cornes <hello@bradley.dev>",
"license": "MIT",
"version": "0.6.6",
"homepage": "https://github.com/tailwindlabs/tailwindcss-intellisense",
"bugs": {
"url": "https://github.com/tailwindlabs/tailwindcss-intellisense/issues",
"email": "hello@bradley.dev"
},
"repository": {
"type": "git",
"url": "https://github.com/tailwindlabs/tailwindcss-intellisense.git"
},
"publisher": "bradlc",
"keywords": [
"tailwind",
"tailwindcss",
"css",
"intellisense",
"autocomplete",
"vscode"
],
"engines": {
"vscode": "^1.52.0"
},
"categories": [
"Linters",
"Other"
],
"galleryBanner": {
"color": "#f9fafb"
},
"icon": "media/icon.png",
"activationEvents": [
"onStartupFinished"
],
"main": "dist/extension/index.js",
"contributes": {
"commands": [
{
"command": "tailwindCSS.showOutput",
"title": "Tailwind CSS: Show Output",
"enablement": "tailwindCSS.hasOutputChannel"
}
],
"grammars": [
{
"scopeName": "tailwindcss.injection",
"path": "./syntaxes/tailwind.tmLanguage.json",
"injectTo": [
"source.css",
"source.css.scss",
"source.css.less",
"source.css.postcss",
"source.vue",
"source.svelte",
"text.html"
]
}
],
"configuration": {
"title": "Tailwind CSS IntelliSense",
"properties": {
"tailwindCSS.emmetCompletions": {
"type": "boolean",
"default": false,
"markdownDescription": "Enable class name completions when using Emmet-style syntax, for example `div.bg-red-500.uppercase`"
},
"tailwindCSS.includeLanguages": {
"type": "object",
"additionalProperties": {
"type": "string"
},
"default": {},
"markdownDescription": "Enable features in languages that are not supported by default. Add a mapping here between the new language and an already supported language.\n E.g.: `{\"plaintext\": \"html\"}`"
},
"tailwindCSS.colorDecorators": {
"type": "boolean",
"default": true,
"markdownDescription": "Controls whether the editor should render inline color decorators for Tailwind CSS classes and helper functions.",
"scope": "language-overridable"
},
"tailwindCSS.validate": {
"type": "boolean",
"default": true,
"markdownDescription": "Enable linting. Rules can be configured individually using the `tailwindcss.lint.*` settings",
"scope": "language-overridable"
},
"tailwindCSS.lint.cssConflict": {
"type": "string",
"enum": [
"ignore",
"warning",
"error"
],
"default": "warning",
"markdownDescription": "Class names on the same HTML element which apply the same CSS property or properties",
"scope": "language-overridable"
},
"tailwindCSS.lint.invalidApply": {
"type": "string",
"enum": [
"ignore",
"warning",
"error"
],
"default": "error",
"markdownDescription": "Unsupported use of the [`@apply` directive](https://tailwindcss.com/docs/functions-and-directives/#apply)",
"scope": "language-overridable"
},
"tailwindCSS.lint.invalidScreen": {
"type": "string",
"enum": [
"ignore",
"warning",
"error"
],
"default": "error",
"markdownDescription": "Unknown screen name used with the [`@screen` directive](https://tailwindcss.com/docs/functions-and-directives/#screen)",
"scope": "language-overridable"
},
"tailwindCSS.lint.invalidVariant": {
"type": "string",
"enum": [
"ignore",
"warning",
"error"
],
"default": "error",
"markdownDescription": "Unknown variant name used with the [`@variants` directive](https://tailwindcss.com/docs/functions-and-directives/#variants)",
"scope": "language-overridable"
},
"tailwindCSS.lint.invalidConfigPath": {
"type": "string",
"enum": [
"ignore",
"warning",
"error"
],
"default": "error",
"markdownDescription": "Unknown or invalid path used with the [`theme` helper](https://tailwindcss.com/docs/functions-and-directives/#theme)",
"scope": "language-overridable"
},
"tailwindCSS.lint.invalidTailwindDirective": {
"type": "string",
"enum": [
"ignore",
"warning",
"error"
],
"default": "error",
"markdownDescription": "Unknown value used with the [`@tailwind` directive](https://tailwindcss.com/docs/functions-and-directives/#tailwind)",
"scope": "language-overridable"
},
"tailwindCSS.lint.recommendedVariantOrder": {
"type": "string",
"enum": [
"ignore",
"warning",
"error"
],
"default": "warning",
"markdownDescription": "Class variants not in the recommended order (applies in [JIT mode](https://tailwindcss.com/docs/just-in-time-mode) only)",
"scope": "language-overridable"
},
"tailwindCSS.experimental.classRegex": {
"type": "array",
"scope": "language-overridable"
},
"tailwindCSS.showPixelEquivalents": {
"type": "boolean",
"default": true,
"markdownDescription": "Show `px` equivalents for `rem` CSS values."
},
"tailwindCSS.rootFontSize": {
"type": "number",
"default": 16,
"markdownDescription": "Root font size in pixels. Used to convert `rem` CSS values to their `px` equivalents. See `#tailwindCSS.showPixelEquivalents#`."
}
}
}
},
"name": "root",
"private": true,
"scripts": {
"dev": "npm run clean && glob-exec --foreach --parallel \"src/*.ts\" -- \"ncc build {{file}} --watch -o dist/{{file.toString().replace(/^src\\//, '').replace(/\\.ts$/, '')}}\"",
"build": "npm run clean && glob-exec --foreach --parallel \"src/*.ts\" -- \"ncc build {{file}} -o dist/{{file.toString().replace(/^src\\//, '').replace(/\\.ts$/, '')}}\" && mv dist/server/index.js dist/server/tailwindServer.js && npm run minify",
"minify": "glob-exec --foreach --parallel \"dist/**/*.js\" -- \"terser {{file}} --compress --mangle --output {{file.toString()}}\"",
"package": "vsce package",
"publish": "vsce publish",
"vscode:prepublish": "npm run build",
"clean": "rimraf dist",
"test": "jest"
},
"dependencies": {
"@ctrl/tinycolor": "3.1.4",
"@types/debounce": "1.2.0",
"@types/mocha": "5.2.0",
"@types/node": "14.14.34",
"@types/vscode": "1.54.0",
"@vercel/ncc": "0.28.4",
"builtin-modules": "3.2.0",
"chokidar": "3.5.1",
"debounce": "1.2.0",
"dlv": "1.1.3",
"dset": "2.0.1",
"enhanced-resolve": "5.8.0",
"fast-glob": "3.2.4",
"find-up": "5.0.0",
"glob-exec": "0.1.1",
"jest": "25.5.4",
"klona": "2.0.4",
"normalize-path": "3.0.0",
"pkg-up": "3.1.0",
"postcss": "8.2.6",
"postcss-load-config": "3.0.1",
"postcss-selector-parser": "6.0.2",
"prettier": "^2.2.1",
"rimraf": "3.0.2",
"semver": "7.3.2",
"stack-trace": "0.0.10",
"tailwindcss": "2.0.3",
"terser": "4.6.12",
"typescript": "4.2.4",
"vsce": "1.87.0",
"vscode-languageclient": "7.0.0",
"vscode-languageserver": "7.0.0",
"vscode-languageserver-textdocument": "1.0.1",
"vscode-uri": "3.0.2"
"bootstrap": "lerna bootstrap --hoist"
},
"devDependencies": {
"@types/moo": "0.5.3",
"css.escape": "1.5.1",
"detect-indent": "6.0.0",
"line-column": "1.0.2",
"moo": "0.5.1",
"multi-regexp2": "1.0.3",
"sift-string": "0.0.2",
"vscode-emmet-helper-bundled": "0.0.1"
"lerna": "^3.22.1"
}
}

View File

@ -0,0 +1 @@
/bin

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,48 @@
{
"name": "tailwindcss-language-server",
"description": "Tailwind CSS Language Server",
"version": "0.0.1",
"scripts": {
"build": "npm run clean && ncc build src/server.ts -o bin --minify && mv bin/index.js bin/tailwindcss-language-server && npm run hashbang",
"clean": "rimraf dist",
"hashbang": "echo \"#!/usr/bin/env node\n$(cat bin/tailwindcss-language-server)\" > bin/tailwindcss-language-server"
},
"bin": {
"tailwindcss-language-server": "./bin/tailwindcss-language-server"
},
"files": [
"bin"
],
"devDependencies": {
"@ctrl/tinycolor": "3.1.4",
"@types/debounce": "1.2.0",
"@types/node": "14.14.34",
"@types/vscode": "1.56.0",
"@vercel/ncc": "0.28.4",
"builtin-modules": "3.2.0",
"chokidar": "3.5.1",
"debounce": "1.2.0",
"dlv": "1.1.3",
"dset": "2.0.1",
"enhanced-resolve": "5.8.0",
"fast-glob": "3.2.4",
"find-up": "5.0.0",
"jest": "25.5.4",
"klona": "2.0.4",
"normalize-path": "3.0.0",
"pkg-up": "3.1.0",
"postcss": "8.2.6",
"postcss-load-config": "3.0.1",
"postcss-selector-parser": "6.0.2",
"prettier": "2.3.0",
"rimraf": "3.0.2",
"semver": "7.3.2",
"stack-trace": "0.0.10",
"tailwindcss": "2.0.3",
"terser": "4.6.12",
"typescript": "4.2.4",
"vscode-languageserver": "7.0.0",
"vscode-languageserver-textdocument": "1.0.1",
"vscode-uri": "3.0.2"
}
}

View File

@ -156,9 +156,7 @@ async function createProjectService(
editor: {
connection,
globalSettings: params.initializationOptions.configuration as Settings,
userLanguages: params.initializationOptions.userLanguages
? params.initializationOptions.userLanguages
: {},
userLanguages: params.initializationOptions.userLanguages,
// TODO
capabilities: {
configuration: true,

View File

@ -3,16 +3,16 @@
"module": "commonjs",
"target": "es6",
"lib": ["ES2019"],
"rootDir": ".",
"rootDir": "..",
"sourceMap": true,
"moduleResolution": "node",
"esModuleInterop": true,
"allowJs": true,
"resolveJsonModule": true,
"baseUrl": ".",
"baseUrl": "..",
"paths": {
"tailwindcss-language-service/*": ["packages/tailwindcss-language-service/*"]
"tailwindcss-language-service/*": ["../packages/tailwindcss-language-service/*"]
}
},
"include": ["src", "packages/tailwindcss-language-service"]
"include": ["src", "../packages/tailwindcss-language-service"]
}

View File

@ -1,2 +1 @@
/node_modules
/dist

File diff suppressed because it is too large Load Diff

View File

@ -24,6 +24,7 @@
"line-column": "1.0.2",
"moo": "0.5.1",
"multi-regexp2": "1.0.3",
"postcss": "8.2.6",
"postcss-selector-parser": "6.0.2",
"semver": "7.3.2",
"sift-string": "0.0.2",
@ -33,7 +34,7 @@
"vscode-languageserver-textdocument": "1.0.1"
},
"devDependencies": {
"postcss": "8.2.6",
"prettier": "2.3.0",
"tsdx": "0.14.1",
"tslib": "2.2.0",
"typescript": "4.2.4"

View File

@ -2,15 +2,14 @@ import type { TextDocument, Position } from 'vscode-languageserver'
import { isInsideTag, isVueDoc, isSvelteDoc, isHtmlDoc } from './html'
import { isJsDoc } from './js'
import { State } from './state'
export const CSS_LANGUAGES = ['css', 'less', 'postcss', 'sass', 'scss', 'stylus', 'sugarss']
import { cssLanguages } from './languages'
export function isCssDoc(state: State, doc: TextDocument): boolean {
const userCssLanguages = Object.keys(state.editor.userLanguages).filter((lang) =>
CSS_LANGUAGES.includes(state.editor.userLanguages[lang])
cssLanguages.includes(state.editor.userLanguages[lang])
)
return [...CSS_LANGUAGES, ...userCssLanguages].indexOf(doc.languageId) !== -1
return [...cssLanguages, ...userCssLanguages].indexOf(doc.languageId) !== -1
}
export function isCssContext(state: State, doc: TextDocument, position: Position): boolean {

View File

@ -1,44 +1,13 @@
import type { TextDocument, Position } from 'vscode-languageserver'
import { State } from './state'
export const HTML_LANGUAGES = [
'aspnetcorerazor',
'blade',
'django-html',
'edge',
'ejs',
'erb',
'gohtml',
'GoHTML',
'haml',
'handlebars',
'hbs',
'html',
'HTML (Eex)',
'HTML (EEx)',
'html-eex',
'jade',
'leaf',
'liquid',
'markdown',
'mdx',
'mustache',
'njk',
'nunjucks',
'php',
'razor',
'slim',
'twig',
]
import { htmlLanguages } from './languages'
export function isHtmlDoc(state: State, doc: TextDocument): boolean {
const userHtmlLanguages = Object.keys(
state.editor.userLanguages
).filter((lang) => HTML_LANGUAGES.includes(state.editor.userLanguages[lang]))
return (
[...HTML_LANGUAGES, ...userHtmlLanguages].indexOf(doc.languageId) !== -1
const userHtmlLanguages = Object.keys(state.editor.userLanguages).filter((lang) =>
htmlLanguages.includes(state.editor.userLanguages[lang])
)
return [...htmlLanguages, ...userHtmlLanguages].indexOf(doc.languageId) !== -1
}
export function isVueDoc(doc: TextDocument): boolean {
@ -49,11 +18,7 @@ export function isSvelteDoc(doc: TextDocument): boolean {
return doc.languageId === 'svelte'
}
export function isHtmlContext(
state: State,
doc: TextDocument,
position: Position
): boolean {
export function isHtmlContext(state: State, doc: TextDocument, position: Position): boolean {
let str = doc.getText({
start: { line: 0, character: 0 },
end: position,

View File

@ -1,29 +1,17 @@
import type { TextDocument, Position } from 'vscode-languageserver'
import { isHtmlDoc, isInsideTag, isVueDoc, isSvelteDoc } from './html'
import { State } from './state'
export const JS_LANGUAGES = [
'javascript',
'javascriptreact',
'reason',
'rescript',
'typescript',
'typescriptreact',
]
import { jsLanguages } from './languages'
export function isJsDoc(state: State, doc: TextDocument): boolean {
const userJsLanguages = Object.keys(
state.editor.userLanguages
).filter((lang) => JS_LANGUAGES.includes(state.editor.userLanguages[lang]))
const userJsLanguages = Object.keys(state.editor.userLanguages).filter((lang) =>
jsLanguages.includes(state.editor.userLanguages[lang])
)
return [...JS_LANGUAGES, ...userJsLanguages].indexOf(doc.languageId) !== -1
return [...jsLanguages, ...userJsLanguages].indexOf(doc.languageId) !== -1
}
export function isJsContext(
state: State,
doc: TextDocument,
position: Position
): boolean {
export function isJsContext(state: State, doc: TextDocument, position: Position): boolean {
if (isJsDoc(state, doc)) {
return true
}

View File

@ -1,5 +1,4 @@
export const DEFAULT_LANGUAGES = [
// html
export const htmlLanguages = [
'aspnetcorerazor',
'blade',
'django-html',
@ -27,22 +26,19 @@ export const DEFAULT_LANGUAGES = [
'razor',
'slim',
'twig',
// css
'css',
'less',
'postcss',
'sass',
'scss',
'stylus',
'sugarss',
// js
]
export const cssLanguages = ['css', 'less', 'postcss', 'sass', 'scss', 'stylus', 'sugarss']
export const jsLanguages = [
'javascript',
'javascriptreact',
'reason',
'rescript',
'typescript',
'typescriptreact',
// mixed
'vue',
'svelte',
]
export const specialLanguages = ['vue', 'svelte']
export const languages = [...cssLanguages, ...htmlLanguages, ...jsLanguages, ...specialLanguages]

View File

Before

Width:  |  Height:  |  Size: 256 KiB

After

Width:  |  Height:  |  Size: 256 KiB

View File

Before

Width:  |  Height:  |  Size: 90 KiB

After

Width:  |  Height:  |  Size: 90 KiB

View File

Before

Width:  |  Height:  |  Size: 235 KiB

After

Width:  |  Height:  |  Size: 235 KiB

View File

Before

Width:  |  Height:  |  Size: 267 KiB

After

Width:  |  Height:  |  Size: 267 KiB

View File

@ -0,0 +1 @@
/dist

View File

@ -0,0 +1,125 @@
<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/packages/vscode-tailwindcss/.github/banner-dark.png" alt="" />
Tailwind CSS IntelliSense enhances the Tailwind development experience by providing Visual Studio Code users with advanced features such as autocomplete, syntax highlighting, and linting.
## Installation
**[Install via the Visual Studio Code Marketplace →](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)**
In order for the extension to activate you must have [`tailwindcss` installed](https://tailwindcss.com/docs/installation) and a [Tailwind config file](https://tailwindcss.com/docs/installation#create-your-configuration-file) named `tailwind.config.js` in your workspace.
## Features
### Autocomplete
Intelligent suggestions for class names, as well as [CSS functions and directives](https://tailwindcss.com/docs/functions-and-directives/).
<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/packages/vscode-tailwindcss/.github/autocomplete.png" alt="" />
### Linting
Highlights errors and potential bugs in both your CSS and your markup.
<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/packages/vscode-tailwindcss/.github/linting.png" alt="" />
### Hover Preview
See the complete CSS for a Tailwind class name by hovering over it.
<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/packages/vscode-tailwindcss/.github/hover.png" alt="" />
### CSS Syntax Highlighting
Provides syntax definitions so that Tailwind features are highlighted correctly.
## Recommended VS Code Settings
VS Code has built-in CSS validation which may display errors when using Tailwind-specific syntax, such as `@apply`. You can disable this with the `css.validate` setting:
```
"css.validate": false
```
By default VS Code will not trigger completions when editing "string" content, for example within JSX attribute values. Updating the `editor.quickSuggestions` setting may improve your experience:
```
"editor.quickSuggestions": {
"strings": true
}
```
## Extension Settings
### `tailwindCSS.includeLanguages`
This setting allows you to add additional language support. The key of each entry is the new language ID and the value is any one of the extensions built-in languages, depending on how you want the new language to be treated (e.g. `html`, `css`, or `javascript`):
```json
{
"tailwindCSS.includeLanguages": {
"plaintext": "html"
}
}
```
### `tailwindCSS.emmetCompletions`
Enable completions when using [Emmet](https://emmet.io/)-style syntax, for example `div.bg-red-500.uppercase`. **Default: `false`**
### `tailwindCSS.colorDecorators`
Controls whether the editor should render inline color decorators for Tailwind CSS classes and helper functions. **Default: `true`**
> Note that `editor.colorDecorators` must be enabled for color decorators to be shown.
### `tailwindCSS.showPixelEquivalents`
Show `px` equivalents for `rem` CSS values in completions and hovers. **Default: `true`**
### `tailwindCSS.rootFontSize`
Root font size in pixels. Used to convert `rem` CSS values to their `px` equivalents. See [`tailwindCSS.showPixelEquivalents`](#tailwindcssshowpixelequivalents). **Default: `16`**
### `tailwindCSS.validate`
Enable linting. Rules can be configured individually using the `tailwindcss.lint` settings:
- `ignore`: disable lint rule entirely
- `warning`: rule violations will be considered "warnings," typically represented by a yellow underline
- `error`: rule violations will be considered "errors," typically represented by a red underline
#### `tailwindCSS.lint.invalidScreen`
Unknown screen name used with the [`@screen` directive](https://tailwindcss.com/docs/functions-and-directives/#screen). **Default: `error`**
#### `tailwindCSS.lint.invalidVariant`
Unknown variant name used with the [`@variants` directive](https://tailwindcss.com/docs/functions-and-directives/#variants). **Default: `error`**
#### `tailwindCSS.lint.invalidTailwindDirective`
Unknown value used with the [`@tailwind` directive](https://tailwindcss.com/docs/functions-and-directives/#tailwind). **Default: `error`**
#### `tailwindCSS.lint.invalidApply`
Unsupported use of the [`@apply` directive](https://tailwindcss.com/docs/functions-and-directives/#apply). **Default: `error`**
#### `tailwindCSS.lint.invalidConfigPath`
Unknown or invalid path used with the [`theme` helper](https://tailwindcss.com/docs/functions-and-directives/#theme). **Default: `error`**
#### `tailwindCSS.lint.cssConflict`
Class names on the same HTML element which apply the same CSS property or properties. **Default: `warning`**
#### `tailwindCSS.lint.recommendedVariantOrder`
Class variants not in the recommended order (applies in [JIT mode](https://tailwindcss.com/docs/just-in-time-mode) only). **Default: `warning`**
## Troubleshooting
If youre having issues getting the IntelliSense features to activate, there are a few things you can check:
- Ensure that you have a Tailwind config file in your workspace and that this is named `tailwind.config.js`. Check out the Tailwind documentation for details on [creating a config file](https://tailwindcss.com/docs/installation#create-your-configuration-file).
- Ensure that the `tailwindcss` module is installed in your workspace, via `npm`, `yarn`, or `pnpm`.
- Make sure your VS Code settings arent causing your Tailwind config file to be excluded from search, for example via the `search.exclude` setting.

View File

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,207 @@
{
"name": "vscode-tailwindcss",
"displayName": "Tailwind CSS IntelliSense",
"description": "Intelligent Tailwind CSS tooling for VS Code",
"preview": true,
"author": "Brad Cornes <hello@bradley.dev>",
"license": "MIT",
"version": "0.6.6",
"homepage": "https://github.com/tailwindlabs/tailwindcss-intellisense",
"bugs": {
"url": "https://github.com/tailwindlabs/tailwindcss-intellisense/issues",
"email": "hello@bradley.dev"
},
"repository": {
"type": "git",
"url": "https://github.com/tailwindlabs/tailwindcss-intellisense.git"
},
"publisher": "bradlc",
"keywords": [
"tailwind",
"tailwindcss",
"css",
"intellisense",
"autocomplete",
"vscode"
],
"engines": {
"vscode": "^1.52.0"
},
"categories": [
"Linters",
"Other"
],
"galleryBanner": {
"color": "#f9fafb"
},
"icon": "media/icon.png",
"activationEvents": [
"onStartupFinished"
],
"main": "dist/extension/index.js",
"contributes": {
"commands": [
{
"command": "tailwindCSS.showOutput",
"title": "Tailwind CSS: Show Output",
"enablement": "tailwindCSS.hasOutputChannel"
}
],
"grammars": [
{
"scopeName": "tailwindcss.injection",
"path": "./syntaxes/tailwind.tmLanguage.json",
"injectTo": [
"source.css",
"source.css.scss",
"source.css.less",
"source.css.postcss",
"source.vue",
"source.svelte",
"text.html"
]
}
],
"configuration": {
"title": "Tailwind CSS IntelliSense",
"properties": {
"tailwindCSS.emmetCompletions": {
"type": "boolean",
"default": false,
"markdownDescription": "Enable class name completions when using Emmet-style syntax, for example `div.bg-red-500.uppercase`"
},
"tailwindCSS.includeLanguages": {
"type": "object",
"additionalProperties": {
"type": "string"
},
"default": {},
"markdownDescription": "Enable features in languages that are not supported by default. Add a mapping here between the new language and an already supported language.\n E.g.: `{\"plaintext\": \"html\"}`"
},
"tailwindCSS.colorDecorators": {
"type": "boolean",
"default": true,
"markdownDescription": "Controls whether the editor should render inline color decorators for Tailwind CSS classes and helper functions.",
"scope": "language-overridable"
},
"tailwindCSS.validate": {
"type": "boolean",
"default": true,
"markdownDescription": "Enable linting. Rules can be configured individually using the `tailwindcss.lint.*` settings",
"scope": "language-overridable"
},
"tailwindCSS.lint.cssConflict": {
"type": "string",
"enum": [
"ignore",
"warning",
"error"
],
"default": "warning",
"markdownDescription": "Class names on the same HTML element which apply the same CSS property or properties",
"scope": "language-overridable"
},
"tailwindCSS.lint.invalidApply": {
"type": "string",
"enum": [
"ignore",
"warning",
"error"
],
"default": "error",
"markdownDescription": "Unsupported use of the [`@apply` directive](https://tailwindcss.com/docs/functions-and-directives/#apply)",
"scope": "language-overridable"
},
"tailwindCSS.lint.invalidScreen": {
"type": "string",
"enum": [
"ignore",
"warning",
"error"
],
"default": "error",
"markdownDescription": "Unknown screen name used with the [`@screen` directive](https://tailwindcss.com/docs/functions-and-directives/#screen)",
"scope": "language-overridable"
},
"tailwindCSS.lint.invalidVariant": {
"type": "string",
"enum": [
"ignore",
"warning",
"error"
],
"default": "error",
"markdownDescription": "Unknown variant name used with the [`@variants` directive](https://tailwindcss.com/docs/functions-and-directives/#variants)",
"scope": "language-overridable"
},
"tailwindCSS.lint.invalidConfigPath": {
"type": "string",
"enum": [
"ignore",
"warning",
"error"
],
"default": "error",
"markdownDescription": "Unknown or invalid path used with the [`theme` helper](https://tailwindcss.com/docs/functions-and-directives/#theme)",
"scope": "language-overridable"
},
"tailwindCSS.lint.invalidTailwindDirective": {
"type": "string",
"enum": [
"ignore",
"warning",
"error"
],
"default": "error",
"markdownDescription": "Unknown value used with the [`@tailwind` directive](https://tailwindcss.com/docs/functions-and-directives/#tailwind)",
"scope": "language-overridable"
},
"tailwindCSS.lint.recommendedVariantOrder": {
"type": "string",
"enum": [
"ignore",
"warning",
"error"
],
"default": "warning",
"markdownDescription": "Class variants not in the recommended order (applies in [JIT mode](https://tailwindcss.com/docs/just-in-time-mode) only)",
"scope": "language-overridable"
},
"tailwindCSS.experimental.classRegex": {
"type": "array",
"scope": "language-overridable"
},
"tailwindCSS.showPixelEquivalents": {
"type": "boolean",
"default": true,
"markdownDescription": "Show `px` equivalents for `rem` CSS values."
},
"tailwindCSS.rootFontSize": {
"type": "number",
"default": 16,
"markdownDescription": "Root font size in pixels. Used to convert `rem` CSS values to their `px` equivalents. See `#tailwindCSS.showPixelEquivalents#`."
}
}
}
},
"scripts": {
"dev": "npm run clean && glob-exec --foreach --parallel \"src/*.ts\" -- \"ncc build {{file}} --watch -o dist/{{file.toString().replace(/^src\\//, '').replace(/\\.ts$/, '')}}\"",
"build": "npm run clean && glob-exec --foreach --parallel \"src/*.ts\" -- \"ncc build {{file}} -o dist/{{file.toString().replace(/^src\\//, '').replace(/\\.ts$/, '')}}\" && mv dist/server/index.js dist/server/tailwindServer.js && npm run minify",
"minify": "glob-exec --foreach --parallel \"dist/**/*.js\" -- \"terser {{file}} --compress --mangle --output {{file.toString()}}\"",
"package": "vsce package",
"publish": "vsce publish",
"vscode:prepublish": "npm run build",
"clean": "rimraf dist",
"test": "jest"
},
"devDependencies": {
"@ctrl/tinycolor": "3.1.4",
"@types/vscode": "1.56.0",
"@vercel/ncc": "0.28.4",
"glob-exec": "0.1.1",
"rimraf": "3.0.2",
"terser": "4.6.12",
"vsce": "1.87.0",
"vscode-languageclient": "7.0.0"
}
}

View File

@ -27,8 +27,8 @@ import {
State as LanguageClientState,
RevealOutputChannelOn,
} from 'vscode-languageclient/node'
import { DEFAULT_LANGUAGES } from './lib/languages'
import isObject from './util/isObject'
import { languages as defaultLanguages } from 'tailwindcss-language-service/src/util/languages'
import isObject from 'tailwindcss-language-service/src/util/isObject'
import { dedupe, equal } from 'tailwindcss-language-service/src/util/array'
import { names as namedColors } from '@ctrl/tinycolor'
@ -83,6 +83,7 @@ function getUserLanguages(folder?: WorkspaceFolder): Record<string, string> {
}
export async function activate(context: ExtensionContext) {
console.log(Uri.parse(`command:editor.action.addCommentLine`).toString())
let module = context.asAbsolutePath(path.join('dist', 'server', 'index.js'))
let prod = path.join('dist', 'server', 'tailwindServer.js')
@ -126,7 +127,7 @@ export async function activate(context: ExtensionContext) {
const userLanguages = getUserLanguages(folder)
if (userLanguages) {
const userLanguageIds = Object.keys(userLanguages)
const newLanguages = dedupe([...DEFAULT_LANGUAGES, ...userLanguageIds])
const newLanguages = dedupe([...defaultLanguages, ...userLanguageIds])
if (!equal(newLanguages, languages.get(folder.uri.toString()))) {
languages.set(folder.uri.toString(), newLanguages)
@ -168,7 +169,7 @@ export async function activate(context: ExtensionContext) {
if (!languages.has(folder.uri.toString())) {
languages.set(
folder.uri.toString(),
dedupe([...DEFAULT_LANGUAGES, ...Object.keys(getUserLanguages(folder))])
dedupe([...defaultLanguages, ...Object.keys(getUserLanguages(folder))])
)
}
@ -199,6 +200,15 @@ export async function activate(context: ExtensionContext) {
outputChannel: outputChannel,
revealOutputChannelOn: RevealOutputChannelOn.Never,
middleware: {
async provideHover(document, position, token, next) {
let result = await next(document, position, token)
result.contents = result.contents.map((content) => {
// @ts-ignore
content.isTrusted = true
return content
})
return result
},
async resolveCompletionItem(item, token, next) {
let result = await next(item, token)
let selections = Window.activeTextEditor.selections

View File

@ -0,0 +1 @@
import 'tailwindcss-language-server/src/server'

View File

@ -0,0 +1,23 @@
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"lib": ["ES2019"],
"rootDir": "..",
"sourceMap": true,
"moduleResolution": "node",
"esModuleInterop": true,
"allowJs": true,
"resolveJsonModule": true,
"baseUrl": "..",
"paths": {
"tailwindcss-language-service/*": ["../packages/tailwindcss-language-service/*"],
"tailwindcss-language-server/*": ["../packages/tailwindcss-language-server/*"]
}
},
"include": [
"src",
"../packages/tailwindcss-language-service",
"../packages/tailwindcss-language-server"
]
}

View File

@ -1,3 +0,0 @@
export default function isObject(variable: any): boolean {
return Object.prototype.toString.call(variable) === '[object Object]'
}

View File

@ -1,5 +0,0 @@
import * as util from 'util'
export function logFull(object: any): void {
console.log(util.inspect(object, { showHidden: false, depth: null }))
}