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">
            <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.
        </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"
                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 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 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 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 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 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='{{ "/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.
            </p>
        </div>
        <div class="col-lg-4">
            <h1 class="text-center"><i class="fas fa-book" aria-hidden="true"></i></h1>
            <a href='{{ "/specification" | prepend: site.baseurl }}'><h3 class="text-center">Specification</h3></a>
            <p>
                The latest version of the protocol specification is version 3.0.
            </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>