Interactive setup for GraphQL LSP development environment
Sets up GraphQL LSP with graphql-lsp, ESLint, and Prettier for intelligent autocomplete, validation, and formatting in your GraphQL files. Use this when starting a GraphQL project or when your editor isn't providing GraphQL IntelliSense.
/plugin marketplace add zircote/graphql-lsp/plugin install graphql-lsp@zircote-lspThis command will configure your GraphQL development environment with graphql-lsp server and essential tools.
First, verify Node.js is installed:
node --version
npm --version
npm install -g graphql-language-service-cli graphql
Quick install (all recommended tools):
npm install -g prettier @graphql-eslint/eslint-plugin graphql-tag
# Check graphql-lsp
graphql-lsp --version
# Check GraphQL
graphql --version
# Check Prettier
prettier --version
.graphqlrc.yml:
schema: schema.graphql
documents:
- 'src/**/*.graphql'
- 'src/**/*.gql'
extensions:
endpoints:
default:
url: http://localhost:4000/graphql
Or graphql.config.js:
module.exports = {
schema: './schema.graphql',
documents: ['./src/**/*.{graphql,gql}'],
extensions: {
endpoints: {
default: {
url: 'http://localhost:4000/graphql',
},
},
},
};
export ENABLE_LSP_TOOL=1
Test the LSP integration:
# Create a test schema
cat > test_schema.graphql << 'EOF'
type Query {
hello: String!
}
EOF
# Validate schema
graphql-inspector validate test_schema.graphql
# Format with Prettier
prettier --write test_schema.graphql
# Clean up
rm test_schema.graphql
Install GraphQL Code Generator:
npm install -g @graphql-codegen/cli
# Initialize configuration
graphql-codegen init