johnsoncodehk

Volar 2.0 "Link"

I am Johnson, the author of Volar (now known as Vue Language Tools), and we released version 2.0 in March this year. This article will introduce you to the improvements and development experiences brought by 2.0.

Why 2.0?

In Vetur and Volar v1, we implemented Vue's IDE support through the Language Server Protocol (LSP), which works well for most small to medium-sized Vue projects, but there may be problems for very large projects.

TS Server and Vue Language Server are using double the memory

johnsoncodehk

import type { SFCParseResult, VueLanguagePlugin } from '../types';
import { parse } from '../utils/parseSfc';

const jsxWrapper = ['<script setup lang="jsx">\n', '\n</script>'];
const tsxWrapper = ['<script setup lang="tsx">\n', '\n</script>'];

const plugin: VueLanguagePlugin = _ctx => {

	return {

johnsoncodehk

import type { Rule } from '@tsslint/config';

export function create(): Rule {
	return ({ typescript: ts, sourceFile, reportWarning }) => {
		ts.forEachChild(sourceFile, function cb(node) {
			if (
				ts.isCallExpression(node) &&
				ts.isIdentifier(node.expression) &&
				node.expression.text === 'alert'
			) {

johnsoncodehk

import type { Rule } from '@tsslint/config';

export function create(): Rule {
	return ({ typescript: ts, sourceFile, languageService, reportWarning }) => {
		ts.forEachChild(sourceFile, function walk(node) {
			if (ts.isNonNullExpression(node)) {
				const typeChecker = languageService.getProgram()!.getTypeChecker();
				const type = typeChecker.getTypeAtLocation(node.expression);
				if (
					typeChecker.typeToString(type, undefined, ts.TypeFormatFlags.NoTruncation)

johnsoncodehk

/**
 * 
 * @type {import('@tsslint/config').Rule}
 */
const noConsoleRule = ({ typescript: ts, sourceFile, reportWarning }) => {
	ts.forEachChild(sourceFile, function walk(node) {
		if (
			ts.isPropertyAccessExpression(node) &&
			ts.isIdentifier(node.expression) &&
			node.expression.text === 'console'

johnsoncodehk

import { computed, ref } from "vue";
import { ComputedGetter, pauseTracking, resetTracking } from "@vue/reactivity";

// if no version, not work for objects/arrays...
export function cheapComputed<T, K = T>(getValue: ComputedGetter<T>, getVersion?: ComputedGetter<K>) {
	const value = computed(getValue);
	const version = getVersion ? computed(getVersion) : value;
	const lastValue = ref<T>();
	const lastVersion = ref<K>();
	const changed = computed(() => version.value !== lastVersion.value);

johnsoncodehk

window.history.replaceState("", "", window.location.href.replace(new RegExp("/(?!.*/)"), ""))

johnsoncodehk

/*
/*/
!/Assets/
!/Packages/
!/ProjectSettings/
!.gitignore

johnsoncodehk

del /s /q /f /a .DS_STORE
del /s /q /f /a ._*
del /s /q /f /a *DS_STORE
pause

johnsoncodehk

let AspectMode = cc.Enum({
    None: 0,
    WidthControlsHeight: 1,
    HeightControlsWidth: 2,
    FitInParent: 3,
    EnvelopeParent: 4,
});

cc.Class({
    extends: cc.Component,