(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[883],{2959:function(e,n,s){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/workflows/vscode-integration",function(){return s(3175)}])},3175:function(e,n,s){"use strict";s.r(n),s.d(n,{__toc:function(){return l}});var i=s(477),t=s(6338),o=s(4213),r=s(1313);s(6937);var a=s(338);let l=[{depth:2,value:"i18n Ally",id:"i18n-ally"},{depth:2,value:"Sherlock",id:"sherlock"}];function d(e){let n=Object.assign({h1:"h1",p:"p",code:"code",ol:"ol",li:"li",a:"a",h2:"h2",strong:"strong",ul:"ul",pre:"pre",span:"span"},(0,a.a)(),e.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{children:"VSCode integration"}),"\n",(0,i.jsxs)(n.p,{children:["To improve the workflow for managing messages right from your code editor, you can use an extension for VSCode that includes support for ",(0,i.jsx)(n.code,{children:"next-intl"}),"."]}),"\n",(0,i.jsx)("video",{className:"my-8",loop:!0,controls:!0,muted:!0,src:"/i18n-ally-demo.mp4"}),"\n",(0,i.jsxs)(n.p,{children:["These extensions are known to support ",(0,i.jsx)(n.code,{children:"next-intl"}),":"]}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"#i18n-ally",children:"i18n Ally"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"#sherlock",children:"Sherlock"})}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"i18n-ally",children:"i18n Ally"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Features:"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Message extraction"}),"\n",(0,i.jsx)(n.li,{children:"Inline annotations"}),"\n",(0,i.jsx)(n.li,{children:"Inline message editing"}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"https://github.com/lokalise/i18n-ally/wiki/Machine-Translation",children:"Machine translations"})}),"\n",(0,i.jsxs)(n.li,{children:["An ",(0,i.jsx)(n.a,{href:"https://github.com/lokalise/i18n-ally/wiki/Editor-UI",children:"editor UI"})," that provides a file-based system for annotating messages & reviews"]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Setup:"})}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsxs)(n.li,{children:["Install ",(0,i.jsx)(n.a,{href:"https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally",children:"i18n Ally"})]}),"\n",(0,i.jsxs)(n.li,{children:["Configure the extension in your project via ",(0,i.jsx)(n.a,{href:"https://code.visualstudio.com/docs/getstarted/settings#_workspace-settings",children:"workspace settings"})]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{"data-language":"json","data-theme":"default",filename:".vscode/settings.json",hasCopyCode:!0,children:(0,i.jsxs)(n.code,{"data-language":"json","data-theme":"default",children:[(0,i.jsxs)(n.span,{className:"line",children:[(0,i.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"i18n-ally.localesPaths"'}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:": ["}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"./path/to/your/messages"'}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"], "}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:'// E.g. "./messages"'})]}),"\n",(0,i.jsxs)(n.span,{className:"line",children:[(0,i.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"i18n-ally.keystyle"'}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:": "}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"nested"'})]})]})}),"\n",(0,i.jsx)(n.h2,{id:"sherlock",children:"Sherlock"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Features:"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Message extraction"}),"\n",(0,i.jsx)(n.li,{children:"Inline annotations"}),"\n",(0,i.jsx)(n.li,{children:"Inline message editing"}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"https://inlang.com/m/r7kp499g/app-inlang-ideextension#message-linting?ref=next-intl",children:"Message linting"})}),"\n",(0,i.jsxs)(n.li,{children:["Integration with other parts of the inlang ecosystem like ",(0,i.jsx)(n.a,{href:"https://inlang.com/m/tdozzpar/app-inlang-editor?ref=next-intl",children:"the Fink editor"})," or ",(0,i.jsx)(n.a,{href:"https://inlang.com/m/2qj2w8pu/app-inlang-cli?ref=next-intl",children:"the inlang CLI"})]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Setup:"})}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsxs)(n.li,{children:["Install the ",(0,i.jsx)(n.a,{href:"https://marketplace.visualstudio.com/items?itemName=inlang.vs-code-extension",children:"Sherlock VS Code extension"})]}),"\n",(0,i.jsxs)(n.li,{children:["Configure the extension in your project via ",(0,i.jsx)(n.code,{children:"project.inlang/settings.json"}),":"]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{"data-language":"json","data-theme":"default",filename:"project.inlang/settings.json",hasCopyCode:!0,children:(0,i.jsxs)(n.code,{"data-language":"json","data-theme":"default",children:[(0,i.jsx)(n.span,{className:"line",children:(0,i.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"{"})}),"\n",(0,i.jsxs)(n.span,{className:"line",children:[(0,i.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:'"$schema"'}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://inlang.com/schema/project-settings"'}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(n.span,{className:"line",children:[(0,i.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:'"sourceLanguageTag"'}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"en"'}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(n.span,{className:"line",children:[(0,i.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:'"languageTags"'}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" ["}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"en"'}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"de"'}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"]"}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(n.span,{className:"line",children:[(0,i.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:'"modules"'}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" ["})]}),"\n",(0,i.jsxs)(n.span,{className:"line",children:[(0,i.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://cdn.jsdelivr.net/npm/@inlang/plugin-next-intl@latest/dist/index.js"'})]}),"\n",(0,i.jsxs)(n.span,{className:"line",children:[(0,i.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"  ]"}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(n.span,{className:"line",children:[(0,i.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:'"plugin.inlang.nextIntl"'}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,i.jsxs)(n.span,{className:"line",children:[(0,i.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:'"pathPattern"'}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"./messages/{languageTag}.json"'})]}),"\n",(0,i.jsx)(n.span,{className:"line",children:(0,i.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"  }"})}),"\n",(0,i.jsx)(n.span,{className:"line",children:(0,i.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,i.jsxs)(n.p,{children:["Learn more in the inlang docs: ",(0,i.jsx)(n.a,{href:"https://inlang.com/g/hhfueysj/guide-nilsjacobsen-nextIntlIdeExtension?ref=next-intl",children:"Setting up next-intl with the Sherlock extension"})]})]})}let c={MDXContent:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,a.a)(),e.components);return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)},pageOpts:{filePath:"pages/docs/workflows/vscode-integration.mdx",route:"/docs/workflows/vscode-integration",pageMap:[{kind:"Meta",data:{index:{title:"Introduction",type:"page",display:"hidden",theme:{layout:"raw"}},docs:{title:"Docs",type:"page"},examples:{title:"Examples",type:"page",theme:{sidebar:!1,toc:!1}},blog:{title:"Blog",type:"page",theme:{sidebar:!1,toc:!1}}}},{kind:"Folder",name:"blog",route:"/blog",children:[{kind:"Meta",data:{index:{title:"next-intl blog"},"next-intl-3-0":{title:"next-intl 3.0",display:"hidden"},"translations-outside-of-react-components":{title:"How (not) to use translations outside of React components",display:"hidden"}}},{kind:"MdxPage",name:"index",route:"/blog"},{kind:"MdxPage",name:"next-intl-3-0",route:"/blog/next-intl-3-0",frontMatter:{title:"next-intl 3.0"}},{kind:"MdxPage",name:"translations-outside-of-react-components",route:"/blog/translations-outside-of-react-components",frontMatter:{title:"How (not) to use translations outside of React components"}}]},{kind:"Folder",name:"docs",route:"/docs",children:[{kind:"Meta",data:{"getting-started":"Getting started",usage:"Usage guide",environments:"Environments",routing:"Routing",workflows:"Workflows & integrations","design-principles":"Design principles"}},{kind:"MdxPage",name:"design-principles",route:"/docs/design-principles"},{kind:"Folder",name:"environments",route:"/docs/environments",children:[{kind:"Meta",data:{index:"Overview","server-client-components":"Server & Client Components","metadata-route-handlers":"Metadata & Route Handlers","error-files":"Error files (e.g. not-found)",sitemap:"Sitemap","core-library":"Core library","runtime-requirements":"Runtime requirements"}},{kind:"MdxPage",name:"core-library",route:"/docs/environments/core-library"},{kind:"MdxPage",name:"error-files",route:"/docs/environments/error-files"},{kind:"MdxPage",name:"index",route:"/docs/environments"},{kind:"MdxPage",name:"metadata-route-handlers",route:"/docs/environments/metadata-route-handlers"},{kind:"MdxPage",name:"runtime-requirements",route:"/docs/environments/runtime-requirements"},{kind:"MdxPage",name:"server-client-components",route:"/docs/environments/server-client-components"},{kind:"MdxPage",name:"sitemap",route:"/docs/environments/sitemap"}]},{kind:"Folder",name:"getting-started",route:"/docs/getting-started",children:[{kind:"Meta",data:{index:"Welcome!","app-router":"App Router","pages-router":"Pages Router"}},{kind:"MdxPage",name:"app-router",route:"/docs/getting-started/app-router"},{kind:"MdxPage",name:"index",route:"/docs/getting-started"},{kind:"MdxPage",name:"pages-router",route:"/docs/getting-started/pages-router"}]},{kind:"Folder",name:"routing",route:"/docs/routing",children:[{kind:"Meta",data:{index:"Overview",middleware:"Middleware",navigation:"Navigation"}},{kind:"MdxPage",name:"index",route:"/docs/routing"},{kind:"MdxPage",name:"middleware",route:"/docs/routing/middleware"},{kind:"MdxPage",name:"navigation",route:"/docs/routing/navigation"}]},{kind:"Folder",name:"usage",route:"/docs/usage",children:[{kind:"Meta",data:{index:"Start",messages:"Messages",numbers:"Numbers","dates-times":"Dates and times",lists:"Lists",configuration:"Global configuration"}},{kind:"MdxPage",name:"configuration",route:"/docs/usage/configuration"},{kind:"MdxPage",name:"dates-times",route:"/docs/usage/dates-times"},{kind:"MdxPage",name:"index",route:"/docs/usage"},{kind:"MdxPage",name:"lists",route:"/docs/usage/lists"},{kind:"MdxPage",name:"messages",route:"/docs/usage/messages"},{kind:"MdxPage",name:"numbers",route:"/docs/usage/numbers"}]},{kind:"Folder",name:"workflows",route:"/docs/workflows",children:[{kind:"Meta",data:{index:"Start",typescript:"TypeScript","localization-management":"Localization management with Crowdin","vscode-integration":"VSCode integration"}},{kind:"MdxPage",name:"index",route:"/docs/workflows"},{kind:"MdxPage",name:"localization-management",route:"/docs/workflows/localization-management"},{kind:"MdxPage",name:"typescript",route:"/docs/workflows/typescript"},{kind:"MdxPage",name:"vscode-integration",route:"/docs/workflows/vscode-integration"}]}]},{kind:"Folder",name:"examples",route:"/examples",children:[{kind:"MdxPage",name:"index",route:"/examples"},{kind:"Meta",data:{index:"Index"}}]},{kind:"MdxPage",name:"index",route:"/",frontMatter:{title:"next-intl"}}],flexsearch:{codeblocks:!1},title:"VSCode integration",headings:l},pageNextRoute:"/docs/workflows/vscode-integration",nextraLayout:o.ZP,themeConfig:r.Z};n.default=(0,t.j)(c)}},function(e){e.O(0,[814,313,888,774,179],function(){return e(e.s=2959)}),_N_E=e.O()}]);