Code Monkey home page Code Monkey logo

coc-svelte's Introduction

Svelte for (Neo)Vim

fork from svelte-vscode.

Provides rich intellisense for Svelte components in (neo)vim, utilising the svelte language server.

Install

:CocInstall coc-svelte

You have to install syntax plugin to get syntax highlight and get right filetype, for example leafOfTree/vim-svelte-plugin

Setup

If you added "files.associations": {"*.svelte": "html" } to your CoC settings, remove it.

Do you want to use TypeScript/SCSS/Less/..? See the docs.

Features

  • Svelte
    • Diagnostic messages for warnings and errors
    • Support for svelte preprocessors that provide source maps
    • Svelte specific formatting (via prettier-plugin-svelte)
  • HTML
    • Hover info
    • Autocompletions
    • Emmet
    • Symbols in Outline panel
  • CSS / SCSS / LESS
    • Diagnostic messages for syntax and lint errors
    • Hover info
    • Autocompletions
    • Formatting (via prettier)
    • Emmet
    • Color highlighting and color picker
    • Symbols in Outline panel
  • TypeScript / JavaScript
    • Diagnostics messages for syntax errors, semantic errors, and suggestions
    • Hover info
    • Formatting (via prettier)
    • Symbols in Outline panel
    • Autocompletions
    • Go to definition
    • Code Actions

Settings

svelte.language-server.runtime

Path to the node executable you would like to use to run the language server. This is useful when you depend on native modules such as node-sass as without this they will run in the context of vscode, meaning node version mismatch is likely.

svelte.language-server.ls-path

You normally don't set this. Path to the language server executable. If you installed the "svelte-language-server" npm package, it's within there at "bin/server.js". Path can be either relative to your workspace root or absolute. Set this only if you want to use a custom version of the language server.

svelte.language-server.port

You normally don't set this. At which port to spawn the language server. Can be used for attaching to the process for debugging / profiling. If you experience crashes due to "port already in use", try setting the port. -1 = default port is used.

svelte.plugin.typescript.enable

Enable the TypeScript plugin. Default: true

svelte.plugin.typescript.diagnostics

Enable diagnostic messages for TypeScript. Default: true

svelte.plugin.typescript.hover

Enable hover info for TypeScript. Default: true

svelte.plugin.typescript.documentSymbols

Enable document symbols for TypeScript. Default: true

svelte.plugin.typescript.completions

Enable completions for TypeScript. Default: true

svelte.plugin.typescript.findReferences

Enable find-references for TypeScript. Default: true

svelte.plugin.typescript.definitions

Enable go to definition for TypeScript. Default: true

svelte.plugin.typescript.codeActions

Enable code actions for TypeScript. Default: true

svelte.plugin.typescript.selectionRange

Enable selection range for TypeScript. Default: true

svelte.plugin.typescript.rename.enable

Enable rename/move Svelte files functionality. Default: true

svelte.plugin.typescript.signatureHelp.enable

Enable signature help (parameter hints) for JS/TS. Default: true

svelte.plugin.css.enable

Enable the CSS plugin. Default: true

svelte.plugin.css.globals

Which css files should be checked for global variables (--global-var: value;). These variables are added to the css completions. String of comma-separated file paths or globs relative to workspace root.

svelte.plugin.css.diagnostics

Enable diagnostic messages for CSS. Default: true

svelte.plugin.css.hover

Enable hover info for CSS. Default: true

svelte.plugin.css.completions

Enable auto completions for CSS. Default: true

svelte.plugin.css.documentColors

Enable document colors for CSS. Default: true

svelte.plugin.css.colorPresentations

Enable color picker for CSS. Default: true

svelte.plugin.css.documentSymbols

Enable document symbols for CSS. Default: true

svelte.plugin.css.selectionRange

Enable selection range for CSS. Default: true

svelte.plugin.html.enable

Enable the HTML plugin. Default: true

svelte.plugin.html.hover

Enable hover info for HTML. Default: true

svelte.plugin.html.completions

Enable auto completions for HTML. Default: true

svelte.plugin.html.tagComplete

Enable HTML tag auto closing. Default: true

svelte.plugin.html.documentSymbols

Enable document symbols for HTML. Default: true

svelte.plugin.svelte.enable

Enable the Svelte plugin. Default: true

svelte.plugin.svelte.diagnostics.enable

Enable diagnostic messages for Svelte. Default: true

svelte.plugin.svelte.compilerWarnings

Svelte compiler warning codes to ignore or to treat as errors. Example: { 'css-unused-selector': 'ignore', 'unused-export-let': 'error'}

svelte.plugin.svelte.format.enable

Enable formatting for Svelte (includes css & js). Default: true

svelte.plugin.svelte.hover.enable

Enable hover info for Svelte (for tags like #if/#each). Default: true

svelte.plugin.svelte.completions.enable

Enable autocompletion for Svelte (for tags like #if/#each). Default: true

svelte.plugin.svelte.codeActions.enable

Enable code actions for Svelte. Default: true

svelte.plugin.svelte.selectionRange.enable

Enable selection range for Svelte. Default: true

Usage with Yarn 2 PnP

  1. Run yarn add -D svelte-language-server to install svelte-language-server as a dev dependency
  2. Run yarn dlx @yarnpkg/pnpify --sdk vim to generate or update the (neo)vim/Yarn integration SDKs. This also sets the svelte.language-server.ls-path setting for the workspace, pointing it to the workspace-installed language server.
  3. Restart (neo)vim.
  4. Commit the changes to .yarn/sdks

coc-svelte's People

Contributors

davidroeca avatar dependabot[bot] avatar iamcco avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.