index.html

---
layout: default
---

<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>

<div class="header-container bg-primary jumbotron">
    <div class="container">
        <div class="intro" role="navigation" aria-label="Main">
            <h1>Language Server Protocol</h1>
        </div>
        <p class="intro-text">
            The Language Server Protocol (LSP) defines the protocol used between an editor or IDE and a language server that provides language features like auto complete, go to definition, find all references etc. The goal of the Language Server Index Format (LSIF, pronounced like "else if") is to support rich code navigation in development tools or a Web UI without needing a local copy of the source code.
        </p>

        <br />
        <div class="intro-text">
            <a class="github-button" href="https://github.com/Microsoft/language-server-protocol" data-size="large" data-icon="octicon-star" data-show-count="true" tabindex="0"
                aria-label="Star Microsoft/language-server-protocol on GitHub">Star</a>
        </div>
    </div>
</div>

<div class="container">
    <div class="row align-items-center">
        <div class="col-lg-7">
            <h2 class="header-light regular-pad">What is the Language Server Protocol?</h2>

            <p>Adding features like auto complete, go to definition, or documentation on hover for a programming language takes significant effort. Traditionally this work had to be repeated for each development tool, as each tool provides different APIs for implementing the same feature.</p>
            <p>A <i>Language Server</i> is meant to provide the language-specific smarts and communicate with development tools over a protocol that enables inter-process communication.</p>
            <p>The idea behind the <i>Language Server Protocol (LSP)</i> is to standardize the protocol for how such servers and development tools communicate. This way, a single <i>Language Server</i> can be re-used in multiple development tools, which in turn can support multiple languages with minimal effort.</p>
            <p>LSP is a win for both language providers and tooling vendors!</p>
        </div>
        <div class="col-lg-5">
            <div id="carouselOne" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <div class="row align-items-center">
                            <div class="col-lg-12">
                                <img alt="VS Code CSS code completion" src="img/vscode-css-code-complete.png" class="img-fluid rounded"/>
                                <p class="text-left"><i>CSS code complete in VS Code powered by the CSS LSP Server</i></p>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="row align-items-center">
                            <div class="col-lg-12">
                                <img alt="Atom CSS code completion" src="img/atom-css-code-complete.png" class="img-fluid rounded"/>
                                <p class="text-left"><i>CSS code complete in Atom powered by the CSS LSP Server</i></p>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="row align-items-center">
                            <div class="col-lg-12">
                                <img alt="Eclipse CSS code completion" src="img/eclipse-css-code-complete.png" class="img-fluid rounded"/>
                                <p class="text-left"><i>CSS code complete in Eclipse IDE powered by the CSS LSP Server</i></p>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="row align-items-center">
                            <div class="col-lg-12">
                                <img alt="VS Code PowerShell hover" src="img/vscode-ps-hover.png" class="img-fluid rounded"/>
                                <p class="text-left"><i>PowerShell Hover in VS Code powered by the PowerShell LSP Server</i></p>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="row align-items-center">
                            <div class="col-lg-8">
                                <img alt="VS IDE Rust code completion" src="img/vs-rust-code-complete.png" class="img-fluid rounded"/>
                                <p class="text-left"><i>Rust code complete in Visual Studio powered by the Rust LSP Server</i></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <hr>

    <div class="row more-info">
        <div class="col-lg-4">
            <h1 class="text-center"><i class="fa fa-cogs" aria-hidden="true"></i></h1>
            <a href='{{ "/overviews/lsp/overview" | prepend: site.baseurl }}'><h3 class="text-center">Overview</h3></a>
            <p>
                The protocol defines the format of the messages sent using JSON-RPC between the development tool and the language server. LSIF defines a graph format to store information about programming artifacts.
            </p>
        </div>
        <div class="col-lg-4">
            <h1 class="text-center"><i class="fas fa-book" aria-hidden="true"></i></h1>
            <a href='{{ "/specifications/specification-current" | prepend: site.baseurl }}'><h3 class="text-center">Specification</h3></a>
            <p>
                The latest version of the LSP specification is version 3.17. There is now also a specification for the upcoming language server index format (LSIF).
            </p>
        </div>
        <div class="col-lg-4">
            <h1 class="text-center"><i class="fas fa-code-branch" aria-hidden="true"></i></h1>
            {% assign sorted = site.implementors | sort: 'index' %}
            <a href = "{{ sorted.first.url | prepend: site.baseurl }}"><h3 class="text-center">Implementations</h3></a>
            <p>
                The LSP has been implemented for many languages and many development tools are integrating these language servers.
            </p>
        </div>
    </div>
</div>