This is the README for your extension "Google style checker".
Расширение умеет анализировать код и считать стиль кода, а также выводить соответствующую картинку.
Для этого расширения подходит версия VS Code v1.95.3
Можно вставлять картинки, которые находятся в папке с расширением
Добавлен счетчик стиля
Добавлена возможность добавлять картинки
Алгоритм оценки стиля кода, используемый в предоставленном коде, основан на анализе текста активного документа с помощью регулярных выражений. Вот подробный алгоритм:
Сбор текста: Получить содержимое активного редактора (открытого файла) в VS Code. javascript Копировать код const editor = vscode.window.activeTextEditor; const text = editor.document.getText();
Для анализа используются три регулярных выражения, каждое из которых проверяет соответствие определённым стилям кода:
Регулярное выражение: \b[a-z][a-zA-Z0-9]\s=\s*[^;]+; Описание: Начинается с одной маленькой буквы ([a-z]). Может содержать буквы и цифры ([a-zA-Z0-9]*). После имени переменной идёт оператор присваивания =. Завершается строка точкой с запятой ;. Пример совпадений: myVariable = 10;, someValue = "text";.
Регулярное выражение: \bconst\s+[A-Z_]+\s*=\s*[^;]+; Описание: Использует ключевое слово const. Имя константы записано в верхнем регистре с символами подчёркивания ([A-Z_]+). После имени — оператор присваивания =. Завершается точкой с запятой ;. Пример совпадений: const MAX_COUNT = 100;, const API_KEY = "key";.
Регулярное выражение: \b[a-z][a-zA-Z0-9]\s(.)\s{ Описание: Имя функции начинается с маленькой буквы ([a-z]). Может содержать буквы и цифры ([a-zA-Z0-9]*). Следует открывающая скобка (, указывающая на начало параметров. Завершается открывающей фигурной скобкой {. Пример совпадений: calculateSum(a, b) {, getData() {.
Для каждой категории используются методы String.prototype.match и Array.prototype.length, чтобы определить количество совпадений:
const variableMatches = (text.match(variablePattern) || []).length;
const constMatches = (text.match(constPattern) || []).length;
const functionMatches = (text.match(functionPattern) || []).length;
text.match(pattern) возвращает массив совпадений.Если совпадений нет, возвращается null. Поэтому используется || [].
Суммируется общее количество совпадений для всех категорий: javascript Копировать код const totalMatches = variableMatches + constMatches + functionMatches;
На основании общего количества совпадений определяется качество стиля:
Если общее количество совпадений равно 0, выводится сообщение о полном несоответствии стилю. Картинка: imageSettings.noMatches.
Если совпадений меньше 5, считается, что стиль кода можно улучшить. Картинка: imageSettings.lessThanFive.
Если совпадений 5 или больше, стиль кода считается хорошим. Картинка: imageSettings.fiveOrMore.
Результаты анализа передаются в WebView. Отображается HTML-контент с итогами:
- Количество совпадений.
- Выбранная картинка.
panel.webview.html = `
<!DOCTYPE html>
<html lang="en">
<body>
<h1>Code Style Results</h1>
<p>Total Matches: ${totalMatches}</p>
<img src="${imgSrc}" alt="Result Image" style="max-width: 100%; height: auto;" />
</body>
</html>
`;Логируется содержимое текста и количество совпадений для каждой категории. Убедитесь, что результаты анализа правильные:
Копировать код
console.log('Matches found:', {
variableMatches,
constMatches,
functionMatches,
totalMatches
});Полный алгоритм:
- Получить текст активного редактора.
- Проверить текст регулярными выражениями:
-
- Переменные в camelCase.
-
- Константы в UPPER_SNAKE_CASE.
-
- Функции в camelCase.
- Подсчитать совпадения для каждой категории.
- Суммировать общее количество совпадений.
- Классифицировать стиль:
-
- 0 совпадений: плохой стиль.
-
- <5 совпадений: средний стиль.
-
- ≥5 совпадений: хороший стиль.
- Отобразить результаты анализа и подходящую картинку в WebView.
Enjoy!