Bruno Silva brunos3d

How to enable Nx template files (tmpl) syntax highlight for vscode

This gist demonstrate how to enable syntax highlight on vscode for nx template files.

The Nx template files uses EJS syntax

To enable the syntax hightlight for EJS just install this extension and add the config below to your vscode settings.json file

Addtionally you can add *__tmpl__ your .prettierignore file

	// ==UserScript==
	// @name JPG Store Optimizer
	// @namespace http://tampermonkey.net/
	// @version 0.1
	// @description try to take over the world!
	// @author You
	// @match https://www.jpg.store/collection/unwantedones*
	// @icon https://www.google.com/s2/favicons?sz=64&domain=jpg.store
	// @grant none
	// ==/UserScript==

	// ==UserScript==
	// @name MacBook Chrome Optimizer
	// @namespace http://tampermonkey.net/
	// @version 0.1
	// @description try to take over the world!
	// @author You
	// @match :///*
	// @grant none
	// ==/UserScript==

	import NextErrorComponent, { ErrorProps } from 'next/error';

	import { captureException, flush } from '@sentry/nextjs';
	import type { NextPage, NextPageContext } from 'next/types';

	export interface AppErrorProps extends ErrorProps {
	err?: Error;
	hasGetInitialPropsRun?: boolean;
	}

	{
	"$ref": "file:../../node_modules/nx/schemas/project-schema.json",
	"sourceRoot": "apps/checkout",
	"projectType": "application",
	"targets": {
	"build": {
	"executor": "@nrwl/next:build",
	"outputs": ["{options.outputPath}"],
	"defaultConfiguration": "production",
	"options": {

	import App, { AppProps, AppContext } from 'next/app';

	function MyApp({ Component, pageProps }: AppProps) {
	return (
	<Component {...pageProps} />
	);
	}

	MyApp.getInitialProps = async (context: AppContext) => {
	return await App.getInitialProps(context); // Retrieves page's `getInitialProps`

	import { ComponentProps, JSXElementConstructor } from 'react';

	export const provider = <C extends JSXElementConstructor<unknown>>(
	provider: C,
	props: Partial<ComponentProps<C>> = {}
	) => [provider, props];

	export const ProviderComposer = ({ providers, children }) => {
	for (let i = providers.length - 1; i >= 0; --i) {
	const [Provider, props] = providers[i];

	declare module 'remoteA/componentA' {
	function Component(props: unknown): JSX.Element;
	export default Component;
	}

	declare module 'remoteB/componentB' {
	export type ComponentProps = {
	foo: boolean;
	bar?: () => void;
	};