源码阅读

Author: 昊天

src/helpers/extensionConfig.ts

@@ -7,7 +7,7 @@ export type ExtensionSettings = {
   typescript: boolean;
   typescriptPropsStatePrefix: 'type' | 'interface';
 };
-
+// 获取项目空间的配置信息
 const extensionConfig = () =>
   workspace.getConfiguration(
     'reactSnippets.settings',

src/helpers/formatters.ts

@@ -6,14 +6,15 @@ import {
   replaceSnippetPlaceholders,
   revertSnippetPlaceholders,
 } from './snippetPlaceholders';
-
-export const formatSnippet = (snippetString: string) => {
+// 从配置工作空间中拿到配置信息对代码片段进行格式化
+export const formatSnippet = (snippetString: string/**传入的代码片段信息 */) => {
   return extensionConfig().prettierEnabled
     ? prettier.format(snippetString, getPrettierConfig())
     : snippetString;
 };
-
+// 介些代码片段
 export const parseSnippet = (body: string | string[]) => {
+  // 数组转化成字符串，以\n进行换行
   const snippetBody = typeof body === 'string' ? body : body.join('\n');
 
   return replaceSnippetPlaceholders(

src/helpers/generateSnippets.ts

@@ -1,5 +1,5 @@
 import { writeFile } from 'fs';
-
+// 代码片段资源
 import componentsSnippets, {
   ComponentsSnippet,
 } from '../sourceSnippets/components';
@@ -19,10 +19,16 @@ import typescriptSnippets, {
   TypescriptSnippet,
 } from '../sourceSnippets/typescript';
 
+
+
+// 工作空间配置
 import extensionConfig from './extensionConfig';
+// 代码片段解析到body
 import parseSnippetToBody from './parseSnippetToBody';
+// 替换代码片段中的Placeholders 键(代码层面的变量)转化成值(vscode可识别的语法)
+// @link https://code.visualstudio.com/docs/editor/userdefinedsnippets#_placeholders
 import { replaceSnippetPlaceholders } from './snippetPlaceholders';
-
+// 代码片段key
 export type SnippetKeys =
   | OthersSnippet['key']
   | HooksSnippet['key']
@@ -34,7 +40,7 @@ export type SnippetKeys =
   | ConsoleSnippet['key']
   | PropTypesSnippet['key']
   | TestsSnippet['key'];
-
+// 代码片段
 export type Snippet =
   | OthersSnippet
   | HooksSnippet
@@ -47,12 +53,14 @@ export type Snippet =
   | PropTypesSnippet
   | TestsSnippet;
 
+//代码片段对象<SnippetKey, Snippet>
 export type Snippets = {
   [key in SnippetKeys]: Snippet;
 };
 
 const getSnippets = () => {
-  const { typescript, languageScopes } = extensionConfig();
+  // 配置信息
+  const { typescript, languageScopes/**语言环境 */ } = extensionConfig();
 
   const snippets = [
     ...(typescript ? typescriptSnippets : []),
@@ -72,16 +80,17 @@ const getSnippets = () => {
     });
     return acc;
   }, {} as Snippets);
-
-  return replaceSnippetPlaceholders(JSON.stringify(snippets, null, 2));
+  // 转换成vscode识别的语法
+  return replaceSnippetPlaceholders(JSON.stringify(snippets, null, 2)/**JSON.stringify进行格式化 */);
 };
 
 const generateSnippets = () =>
   new Promise((resolve) => {
+    // 代码片段json数据格式
     const jsonSnippets = getSnippets();
     writeFile(
-      __dirname + '/../snippets/generated.json',
-      jsonSnippets,
+      __dirname + '/../snippets/generated.json', // 输出路径
+      jsonSnippets, // 数据源
       (error) => {
         if (error) {
           console.error(error);

src/helpers/getPrettierConfig.ts

@@ -7,11 +7,14 @@ prettier
   .resolveConfig('', { editorconfig: true })
   .then((config) => (prettierConfig = config));
 
+
+// 获取prettier的配置信息
 const getPrettierConfig = (): Options => {
+  // 从vscode工作空间拿到配置信息
   const { prettierEnabled } = extensionConfig();
 
   return {
-    parser: 'typescript',
+    parser: 'typescript', // ts语言的方式进行解析
     ...(prettierEnabled && prettierConfig),
   };
 };

src/helpers/parseSnippetToBody.ts

@@ -2,8 +2,10 @@ import extensionConfig from './extensionConfig';
 import { formatSnippet } from './formatters';
 import { Snippet } from './generateSnippets';
 import replaceOrRemoveReactImport from './replaceOrRemoveReactImport';
-
+// 将代码片段放到body中
 const parseSnippetToBody = (snippet: Snippet) => {
+  // 配置信息，是否在顶部引入react
+  // @link https://github.com/841660202/vscode-react-javascript-snippets/blob/master/README.md#:~:text=project%20prettier%20config-,importReactOnTop,-If%20disabled%2C%20snippets
   const { importReactOnTop } = extensionConfig();
   const body =
     typeof snippet.body === 'string' ? snippet.body : snippet.body.join('\n');

src/helpers/replaceOrRemoveReactImport.ts

@@ -1,5 +1,5 @@
 import { Snippet } from './generateSnippets';
-
+// 有引入react得前缀枚举
 const snippetWithReactImportPrefixes = [
   'rfce',
   'rfc',
@@ -45,7 +45,7 @@ const replaceOrRemoveReactImport = ({
   const reactImportIndex = bodyCopy.findIndex((line) =>
     line.match(new RegExp(/import React/, 'g')),
   );
-
+  // 找到react 引入的代码所在行
   if (reactImportIndex !== -1) {
     const line = bodyCopy[reactImportIndex];
     const newLine = line

src/helpers/snippetPlaceholders.ts

@@ -1,20 +1,22 @@
 import { Mappings, Placeholders } from '../types';
 
 import extensionConfig from './extensionConfig';
-
+// Mappings 键转化成值
 export const replaceSnippetPlaceholders = (snippetString: string) => {
   const { typescriptPropsStatePrefix } = extensionConfig();
+  // propsPlaceholder 使用type字段？
   const propsPlaceholder =
     typescriptPropsStatePrefix === 'type'
-      ? Mappings.TypeProps
-      : Mappings.InterfaceProps;
+      ? Mappings.TypeProps // type Props = {}
+      : Mappings.InterfaceProps; // interface Props {}
+  // statePlaceholder 使用type字段？
   const statePlaceholder =
     typescriptPropsStatePrefix === 'type'
-      ? Mappings.TypeState
-      : Mappings.InterfaceState;
+      ? Mappings.TypeState // type State = {}
+      : Mappings.InterfaceState; // interface State {}
 
   return String(snippetString)
-    .replace(new RegExp(Placeholders.FileName, 'g'), '${1:${TM_FILENAME_BASE}}')
+    .replace(new RegExp(Placeholders.FileName, 'g'), '${1:${TM_FILENAME_BASE}}') // 替换成vscode宏
     .replace(new RegExp(Placeholders.FirstTab, 'g'), '${1:first}')
     .replace(new RegExp(Placeholders.SecondTab, 'g'), '${2:second}')
     .replace(new RegExp(Placeholders.ThirdTab, 'g'), '${3:third}')
@@ -25,11 +27,11 @@ export const replaceSnippetPlaceholders = (snippetString: string) => {
     .replace(new RegExp(Placeholders.TypeProps, 'g'), propsPlaceholder)
     .replace(new RegExp(Placeholders.TypeState, 'g'), statePlaceholder);
 };
-
+// Mappings 值转化成键
 export const revertSnippetPlaceholders = (snippetString: string) => {
   return String(snippetString)
     .replace(
-      new RegExp(/\${1:\${TM_FILENAME_BASE}}/, 'g'),
+      new RegExp(/\${1:\${TM_FILENAME_BASE}}/, 'g'), // Mappings(src/types.ts) 的值，替换成key
       Placeholders.FileName,
     )
     .replace(new RegExp(/\${1:first}/, 'g'), Placeholders.FirstTab)

src/helpers/snippetSearch.ts

@@ -6,34 +6,39 @@ import { Snippet } from './generateSnippets';
 
 const snippetSearch = async () => {
   const { showQuickPick, activeTextEditor } = window;
-
+  // 读取所有代码片段
   const snippets = readFileSync(
     __dirname + '/../snippets/generated.json',
     'utf8',
   );
-
+  // 转化成数组
   const snippetsArray = Object.entries(JSON.parse(snippets)) as [
     string,
     Snippet,
   ][];
-
+  // 代码片段数据转化成固定格式
   const items = snippetsArray.map(
     ([shortDescription, { body, description, prefix: label }]) => ({
       body,
       description: description || shortDescription,
       label,
     }),
   );
-
+  // vscode提供筛选能力
+  // @link https://code.visualstudio.com/api/references/vscode-api#QuickPick%3CT%3E
   const rawSnippet = await showQuickPick(items, {
     matchOnDescription: true,
     matchOnDetail: true,
     placeHolder: 'Search snippet by prefix or description',
   });
-
+  // 选中后，将选中的代码片段取body
   const body = rawSnippet ? parseSnippet(rawSnippet.body) : '';
 
   if (activeTextEditor) {
+    // 插入到光标所在位置
+    // @link https://code.visualstudio.com/Search?q=SnippetString
+    // @link https://code.visualstudio.com/updates/v1_9?source=techstories.org#_editor-api-to-insert-a-snippet
+    // 看这个 @link https://code.visualstudio.com/api/references/vscode-api#SnippetString
     activeTextEditor.insertSnippet(new SnippetString(body));
   }
 };

src/index.ts

@@ -32,15 +32,18 @@ const showRestartMessage = async ({
 };
 
 export async function activate(context: ExtensionContext) {
+  // 工作空间配置更改监听
   workspace.onDidChangeConfiguration(showRestartMessage);
+
   if (JSON.stringify(generatedSnippets).length < 10) {
     await generateSnippets();
   }
+  // 注册查询命令
   const snippetSearchCommand = commands.registerCommand(
     'reactSnippets.search',
     snippetSearch,
   );
-
+  // 开启订阅，监听命令变化
   context.subscriptions.push(snippetSearchCommand);
 }
 

test/tsrcredux.tsx

@@ -0,0 +1,22 @@
+import { connect } from 'react-redux'
+import React, { Component } from 'react'
+
+type Props = {}
+
+type State = {}
+
+export class tsrcredux extends Component<Props, State> {
+  state = {}
+
+  render() {
+    return (
+      <div>tsrcredux</div>
+    )
+  }
+}
+
+const mapStateToProps = (state) => ({})
+
+const mapDispatchToProps = {}
+
+export default connect(mapStateToProps, mapDispatchToProps)(tsrcredux)