Fix #2014

Author: octref

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ### 0.28.0
 
+- Load prettier plugin from VLS if not present in workspace folder. #2014.
 - Cross file template type checking - check that components are passed props with the correct types. #1596 and #2294.
 
 ### 0.27.3 | 2020-09-13 | [VSIX](https://marketplace.visualstudio.com/_apis/public/gallery/publishers/octref/vsextensions/vetur/0.27.3/vspackage)

server/src/embeddedSupport/languageModes.ts

@@ -145,12 +145,12 @@ export class LanguageModes {
 
     this.modes['vue'] = getVueMode(workspacePath, globalSnippetDir);
     this.modes['vue-html'] = vueHtmlMode;
-    this.modes['pug'] = getPugMode();
-    this.modes['css'] = getCSSMode(this.documentRegions);
-    this.modes['postcss'] = getPostCSSMode(this.documentRegions);
-    this.modes['scss'] = getSCSSMode(this.documentRegions);
+    this.modes['pug'] = getPugMode(workspacePath);
+    this.modes['css'] = getCSSMode(workspacePath, this.documentRegions);
+    this.modes['postcss'] = getPostCSSMode(workspacePath, this.documentRegions);
+    this.modes['scss'] = getSCSSMode(workspacePath, this.documentRegions);
     this.modes['sass'] = new SassLanguageMode();
-    this.modes['less'] = getLESSMode(this.documentRegions);
+    this.modes['less'] = getLESSMode(workspacePath, this.documentRegions);
     this.modes['stylus'] = getStylusMode(this.documentRegions);
     this.modes['javascript'] = jsMode;
     this.modes['typescript'] = jsMode;

server/src/modes/pug/index.ts

@@ -4,7 +4,7 @@ import { prettierify } from '../../utils/prettier';
 import { VLSFormatConfig } from '../../config';
 import { getFileFsPath } from '../../utils/paths';
 
-export function getPugMode(): LanguageMode {
+export function getPugMode(workspacePath: string): LanguageMode {
   let config: any = {};
 
   return {
@@ -24,6 +24,7 @@ export function getPugMode(): LanguageMode {
       const foo = prettierify(
         value,
         getFileFsPath(document.uri),
+        workspacePath,
         range,
         config.vetur.format as VLSFormatConfig,
         'pug',

server/src/modes/script/javascript.ts

@@ -576,7 +576,7 @@ export async function getJavascriptMode(
         } else {
           doFormat = prettierify;
         }
-        return doFormat(code, filePath, range, vlsFormatConfig, parser, needInitialIndent);
+        return doFormat(code, filePath, workspacePath, range, vlsFormatConfig, parser, needInitialIndent);
       } else {
         const initialIndentLevel = needInitialIndent ? 1 : 0;
         const formatSettings: ts.FormatCodeSettings =

server/src/modes/style/index.ts

@@ -18,27 +18,40 @@ import { ParserOption } from '../../utils/prettier/prettier.d';
 import { NULL_HOVER } from '../nullMode';
 import { VLSFormatConfig } from '../../config';
 
-export function getCSSMode(documentRegions: LanguageModelCache<VueDocumentRegions>): LanguageMode {
+export function getCSSMode(
+  workspacePath: string,
+  documentRegions: LanguageModelCache<VueDocumentRegions>
+): LanguageMode {
   const languageService = getCSSLanguageService();
-  return getStyleMode('css', languageService, documentRegions);
+  return getStyleMode('css', workspacePath, languageService, documentRegions);
 }
 
-export function getPostCSSMode(documentRegions: LanguageModelCache<VueDocumentRegions>): LanguageMode {
+export function getPostCSSMode(
+  workspacePath: string,
+  documentRegions: LanguageModelCache<VueDocumentRegions>
+): LanguageMode {
   const languageService = getCSSLanguageService();
-  return getStyleMode('postcss', languageService, documentRegions);
+  return getStyleMode('postcss', workspacePath, languageService, documentRegions);
 }
 
-export function getSCSSMode(documentRegions: LanguageModelCache<VueDocumentRegions>): LanguageMode {
+export function getSCSSMode(
+  workspacePath: string,
+  documentRegions: LanguageModelCache<VueDocumentRegions>
+): LanguageMode {
   const languageService = getSCSSLanguageService();
-  return getStyleMode('scss', languageService, documentRegions);
+  return getStyleMode('scss', workspacePath, languageService, documentRegions);
 }
-export function getLESSMode(documentRegions: LanguageModelCache<VueDocumentRegions>): LanguageMode {
+export function getLESSMode(
+  workspacePath: string,
+  documentRegions: LanguageModelCache<VueDocumentRegions>
+): LanguageMode {
   const languageService = getLESSLanguageService();
-  return getStyleMode('less', languageService, documentRegions);
+  return getStyleMode('less', workspacePath, languageService, documentRegions);
 }
 
 function getStyleMode(
   languageId: LanguageId,
+  workspacePath: string,
   languageService: LanguageService,
   documentRegions: LanguageModelCache<VueDocumentRegions>
 ): LanguageMode {
@@ -145,6 +158,7 @@ function getStyleMode(
       return prettierify(
         value,
         getFileFsPath(document.uri),
+        workspacePath,
         range,
         config.vetur.format as VLSFormatConfig,
         parserMap[languageId],

server/src/modes/template/htmlMode.ts

@@ -38,7 +38,7 @@ export class HTMLMode implements LanguageMode {
 
   constructor(
     documentRegions: LanguageModelCache<VueDocumentRegions>,
-    workspacePath: string | undefined,
+    private workspacePath: string | undefined,
     vueVersion: VueVersion,
     private vueDocuments: LanguageModelCache<HTMLDocument>,
     private vueInfoService?: VueInfoService
@@ -104,7 +104,7 @@ export class HTMLMode implements LanguageMode {
     return findDocumentSymbols(document, this.vueDocuments.refreshAndGet(document));
   }
   format(document: TextDocument, range: Range, formattingOptions: FormattingOptions) {
-    return htmlFormat(document, range, this.config.vetur.format as VLSFormatConfig);
+    return htmlFormat(document, range, this.config.vetur.format as VLSFormatConfig, this.workspacePath);
   }
   findDefinition(document: TextDocument, position: Position) {
     const embedded = this.embeddedDocuments.refreshAndGet(document);

server/src/modes/template/services/htmlFormat.ts

@@ -13,7 +13,12 @@ type PrettyHtmlConfig = IPrettyHtml extends (input: string, options: infer R) =>
 const TEMPLATE_HEAD = '<template>';
 const TEMPLATE_TAIL = '</template>';
 
-export function htmlFormat(document: TextDocument, currRange: Range, vlsFormatConfig: VLSFormatConfig): TextEdit[] {
+export function htmlFormat(
+  document: TextDocument,
+  currRange: Range,
+  vlsFormatConfig: VLSFormatConfig,
+  workspacePath?: string
+): TextEdit[] {
   if (vlsFormatConfig.defaultFormatter.html === 'none') {
     return [];
   }
@@ -29,6 +34,7 @@ export function htmlFormat(document: TextDocument, currRange: Range, vlsFormatCo
     const prettierResult = formatWithPrettier(
       originalSource,
       getFileFsPath(document.uri),
+      workspacePath,
       currRange,
       vlsFormatConfig,
       false
@@ -78,11 +84,12 @@ function formatWithJsBeautify(input: string, vlsFormatConfig: VLSFormatConfig):
 function formatWithPrettier(
   code: string,
   fileFsPath: string,
+  workspacePath: string | undefined,
   range: Range,
   vlsFormatConfig: VLSFormatConfig,
   initialIndent: boolean
 ) {
-  return prettierify(code, fileFsPath, range, vlsFormatConfig, 'vue', initialIndent);
+  return prettierify(code, fileFsPath, workspacePath, range, vlsFormatConfig, 'vue', initialIndent);
 }
 
 function getPrettyHtmlOptions(prettierrcOptions: Partial<PrettierConfig> | null, vlsFormatConfig: VLSFormatConfig) {

server/src/utils/prettier/index.ts

@@ -6,18 +6,22 @@ import { indentSection } from '../strings';
 import { requireLocalPkg } from './requirePkg';
 import { VLSFormatConfig } from '../../config';
 import { logger } from '../../log';
+import * as path from 'path';
+
+const VLS_PATH = path.resolve(__dirname, '../../../');
 
 export function prettierify(
   code: string,
   fileFsPath: string,
+  workspacePath: string | undefined,
   range: Range,
   vlsFormatConfig: VLSFormatConfig,
   parser: ParserOption,
   initialIndent: boolean
 ): TextEdit[] {
   try {
     const prettier = requireLocalPkg(fileFsPath, 'prettier') as Prettier;
-    const prettierOptions = getPrettierOptions(prettier, fileFsPath, parser, vlsFormatConfig);
+    const prettierOptions = getPrettierOptions(prettier, fileFsPath, workspacePath, parser, vlsFormatConfig);
     logger.logDebug(`Using prettier. Options\n${JSON.stringify(prettierOptions)}`);
 
     const prettierifiedCode = prettier.format(code, prettierOptions);
@@ -32,6 +36,7 @@ export function prettierify(
 export function prettierEslintify(
   code: string,
   fileFsPath: string,
+  workspacePath: string | undefined,
   range: Range,
   vlsFormatConfig: VLSFormatConfig,
   parser: ParserOption,
@@ -41,7 +46,7 @@ export function prettierEslintify(
     const prettier = requireLocalPkg(fileFsPath, 'prettier') as Prettier;
     const prettierEslint = requireLocalPkg(fileFsPath, 'prettier-eslint') as PrettierEslintFormat;
 
-    const prettierOptions = getPrettierOptions(prettier, fileFsPath, parser, vlsFormatConfig);
+    const prettierOptions = getPrettierOptions(prettier, fileFsPath, workspacePath, parser, vlsFormatConfig);
     logger.logDebug(`Using prettier-eslint. Options\n${JSON.stringify(prettierOptions)}`);
 
     const prettierifiedCode = prettierEslint({
@@ -60,6 +65,7 @@ export function prettierEslintify(
 export function prettierTslintify(
   code: string,
   fileFsPath: string,
+  workspacePath: string,
   range: Range,
   vlsFormatConfig: VLSFormatConfig,
   parser: ParserOption,
@@ -69,7 +75,7 @@ export function prettierTslintify(
     const prettier = requireLocalPkg(fileFsPath, 'prettier') as Prettier;
     const prettierTslint = requireLocalPkg(fileFsPath, 'prettier-tslint').format as PrettierTslintFormat;
 
-    const prettierOptions = getPrettierOptions(prettier, fileFsPath, parser, vlsFormatConfig);
+    const prettierOptions = getPrettierOptions(prettier, fileFsPath, workspacePath, parser, vlsFormatConfig);
     logger.logDebug(`Using prettier-tslint. Options\n${JSON.stringify(prettierOptions)}`);
 
     const prettierifiedCode = prettierTslint({
@@ -89,6 +95,7 @@ export function prettierTslintify(
 function getPrettierOptions(
   prettierModule: Prettier,
   fileFsPath: string,
+  workspacePath: string | undefined,
   parser: ParserOption,
   vlsFormatConfig: VLSFormatConfig
 ) {
@@ -98,13 +105,17 @@ function getPrettierOptions(
     prettierrcOptions.tabWidth = prettierrcOptions.tabWidth || vlsFormatConfig.options.tabSize;
     prettierrcOptions.useTabs = prettierrcOptions.useTabs || vlsFormatConfig.options.useTabs;
     prettierrcOptions.parser = parser;
+    // For loading plugins such as @prettier/plugin-pug
+    prettierrcOptions.pluginSearchDirs = workspacePath ? [workspacePath, VLS_PATH] : [VLS_PATH];
 
     return prettierrcOptions;
   } else {
     const vscodePrettierOptions = vlsFormatConfig.defaultFormatterOptions.prettier || {};
     vscodePrettierOptions.tabWidth = vscodePrettierOptions.tabWidth || vlsFormatConfig.options.tabSize;
     vscodePrettierOptions.useTabs = vscodePrettierOptions.useTabs || vlsFormatConfig.options.useTabs;
     vscodePrettierOptions.parser = parser;
+    // For loading plugins such as @prettier/plugin-pug
+    vscodePrettierOptions.pluginSearchDirs = workspacePath ? [workspacePath, VLS_PATH] : [VLS_PATH];
 
     return vscodePrettierOptions;
   }

server/src/utils/prettier/prettier.d.ts

@@ -43,6 +43,7 @@ export interface PrettierConfig {
   jsxSingleQuote: boolean;
   htmlWhitespaceSensitivity: 'css' | 'strict' | 'ignore';
   endOfLine: 'auto' | 'lf' | 'crlf' | 'cr';
+  pluginSearchDirs: string[];
 }
 
 export interface Prettier {