Front-end development artifact VsCode AI auxiliary plug-in DevChat


Which #AI programming assistant is the best? DevChat is “really” easy to use #

Preface

We have all had times when we were writing code and looked at it repeatedly for a long time without knowing where the bug was, which was a huge waste of time. Some basic codes may be solved after a while, but complex codes will take an hour or two to check, or even longer. Wouldn't it be better if there was an AI tool that could help us figure out the basic code and provide us with complex logic. This article introduces to you a VS Code AI auxiliary tool-DevChat, which directly doubles the development efficiency!

Introduction to DevChat

Insert image description here
DevChat is an AI programming tool that integrates a variety of mainstream large models, focusing on improving programmers' programming efficiency. It integrates popular AI applications such as ChatGPT and supports natural language programming, code writing, code generation, code completion and other functions. The biggest advantage of Devchat is that it is a one-stop service that integrates popular large models and can be switched according to needs, eliminating the trouble of selecting and integrating different AI models. You can get started quickly without excessive configuration, thereby comprehensively improving development efficiency.

The product is pragmatic and efficient, and was recently unveiled at the 2023 QCon Global Software Conference, winning praise from many developers in the industry |

DevChat unique advantages

DevChat Compatible with a variety of mainstream large models, multiple templates respond quickly, no need to worry about which AI programming assistant is better, large models include GPT-4 8k/32k, GPT-3.5 4k/16k, Claude2, Wen Xinyiyan, Spark, ChatGLM, Code Llama, etc.; you can select code snippets for AI consultation based on your needs. Therefore, the DevChat AI auxiliary tool is really helpful for developers to improve work efficiency. The specific advantages are as follows:

1. Choose from a variety of large models. For complex tasks, GPT-4 is the only choice. For simple tasks, low-cost models can be used in combination to achieve the best performance.

2. Accurate “context” management. Precise control over context is key to using artificial intelligence effectively. DevChat putscontrol in the hands of the user for true productivity and provides a user-friendly way to simplify contextual selection.

3. Easy to get started. You don’t have to learn a new framework for a specific programming language to extend AI to meet your needs. Prompts should be visible and easy to edit for users, not hidden in complex frames. You don’t need a complicated framework to make AI work for you. All that is needed is a standard editor running on your file system.

4. Practical. The bottleneck in leveraging AI's coding capabilities is embedding the right context in the prompts, and only using AI when it truly adds value.

5. Simple and expandable prompt word directory. Open prompt word extension, Prompts as Code, to meet the customized needs of teams and individuals.

6. Flexible Prompt template management, ask-code function answers various problems in the code base.

7. Product design is pragmatic and iterative feedback is fast.

8, Code and documentation are freely generated rather than simply completed.

9. Connect with Microsoft Azure services for enterprise-level data security that you cantrust.

Official address: https://meri.co/tvy

Register an account

DevChatAccount registration address:Direct link, the key sent to the email after registration, be sure to save it, you will need it after installing the plug-in.

Install plugin

Open the VS Code development tool, search for DevChat in the application market, and then click install
Insert image description here
After installation, there will be a rabbit-like icon on the sidebar. icon, click it to see the view of the plug-in.

Set up key access

The plug-in requires a key for access, which is sent to your email during registration.

Press ⇧⌘P / Ctrl+Shift+P or F1 in Visual Studio Code to open the command palette. Next, enterdevchat access key and enter the access key above. Note don't forget to install Python 3.8+ and Git to use DevChat.

Insert image description here
Then enter the key in your email address.
Insert image description here
Then you can use it normally!

instruction

DevChatThe following instructions are provided to facilitate our operations during development and analysis of the code.

  • Custom local command
    Click this and enter the command you want to run. The return will be added to the context.
  • git diff --cached
    Staged changes since the last commit
  • git diff HEAD
    All changes since the last commit
  • git log for release note
    Formatted commit history since the specified commit
  • symbol definitions
    Find related definitions of classes, functions, etc. in the selected code
  • symbol references
    Find code sites that reference the selected symbol (class, function, variable, etc.)

For example, I want to usesymbol references to analyze the following code:

let transAudioData = {
    
    
  transcode(audioData) {
    
    
    let output = transAudioData.to16kHz(audioData)
    output = transAudioData.to16BitPCM(output)
    output = Array.from(new Uint8Array(output.buffer))
    self.postMessage(output)
    // return output
  },

After selectsymbol references, you can see a JSON output in the consoleOUTPUT.
Insert image description here
After converting the string in the picture to JSON, it is as follows:

{
    
    
    "languageId": "javascript",
    "path": "../study-demo/kedaxunfei/src/until/transcode.worker.js",
    "startLine": 6,
    "content": "  transcode(audioData) {\r\n    let output = transAudioData.to16kHz(audioData)\r\n    output = transAudioData.to16BitPCM(output)\r\n    output = Array.from(new Uint8Array(output.buffer))\r\n    self.postMessage(output)"
}

AI puzzle solving

DevChatEight AI models in the picture are provided, and you can choose one of them for dialogue operations according to your needs.

Select the GPT-3.5 model, and then enter the requirement into DevChat: handwritten Promise, and let it help us answer the question. DevChatThe answer is as follows:
Insert image description here
The following is the entire code of the answer, which shows that the answer is very detailed.

enum PromiseStatus {
    
    
  Pending = 'pending',
  Fulfilled = 'fulfilled',
  Rejected = 'rejected'
}

class MyPromise<T> {
    
    
  private status: PromiseStatus;
  private value: T;
  private reason: any;
  private onFulfilledCallbacks: ((value: T) => void)[];
  private onRejectedCallbacks: ((reason: any) => void)[];

  constructor(executor: (resolve: (value?: T) => void, reject: (reason?: any) => void) => void) {
    
    
    this.status = PromiseStatus.Pending;
    this.value = undefined;
    this.reason = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

    const resolve = (value?: T) => {
    
    
      if (this.status === PromiseStatus.Pending) {
    
    
        this.status = PromiseStatus.Fulfilled;
        this.value = value;
        this.onFulfilledCallbacks.forEach(callback => callback(this.value));
      }
    };

    const reject = (reason?: any) => {
    
    
      if (this.status === PromiseStatus.Pending) {
    
    
        this.status = PromiseStatus.Rejected;
        this.reason = reason;
        this.onRejectedCallbacks.forEach(callback => callback(this.reason));
      }
    };

    try {
    
    
      executor(resolve, reject);
    } catch (err) {
    
    
      reject(err);
    }
  }

  then<U>(onFulfilled?: (value: T) => U | PromiseLike<U>, onRejected?: (reason: any) => U | PromiseLike<U>): MyPromise<U> {
    
    
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
    onRejected = typeof onRejected === 'function' ? onRejected : reason => {
    
     throw reason };

    const promise = new MyPromise<U>((resolve, reject) => {
    
    
      const handleFulfilled = (value: T) => {
    
    
        try {
    
    
          const result = onFulfilled!(value);
          if (result instanceof MyPromise) {
    
    
            result.then(resolve, reject);
          } else {
    
    
            resolve(result);
          }
        } catch (err) {
    
    
          reject(err);
        }
      };

      const handleRejected = (reason: any) => {
    
    
        try {
    
    
          const result = onRejected!(reason);
          if (result instanceof MyPromise) {
    
    
            result.then(resolve, reject);
          } else {
    
    
            resolve(result);
          }
        } catch (err) {
    
    
          reject(err);
        }
      };

      if (this.status === PromiseStatus.Pending) {
    
    
        this.onFulfilledCallbacks.push(handleFulfilled);
        this.onRejectedCallbacks.push(handleRejected);
      } else if (this.status === PromiseStatus.Fulfilled) {
    
    
        setTimeout(() => {
    
    
          handleFulfilled(this.value);
        }, 0);
      } else if (this.status === PromiseStatus.Rejected) {
    
    
        setTimeout(() => {
    
    
          handleRejected(this.reason);
        }, 0);
      }
    });

    return promise;
  }

  catch<U>(onRejected: (reason: any) => U | PromiseLike<U>): MyPromise<U> {
    
    
    return this.then(undefined, onRejected);
  }

  static resolve<U>(value?: U | PromiseLike<U>): MyPromise<U> {
    
    
    return new MyPromise<U>(resolve => resolve(value));
  }

  static reject<U>(reason?: any): MyPromise<U> {
    
    
    return new MyPromise<U>((_, reject) => reject(reason));
  }

  static all<U>(promises: (U | PromiseLike<U>)[]): MyPromise<U[]> {
    
    
    return new MyPromise<U[]>((resolve, reject) => {
    
    
      const results: U[] = [];
      let count = 0;

      const handleResolve = (value: U, idx: number) => {
    
    
        results[idx] = value;
        count++;
        if (count === promises.length) {
    
    
          resolve(results);
        }
      };

      promises.forEach((promise, idx) => {
    
    
        if (promise instanceof MyPromise) {
    
    
          promise.then(value => handleResolve(value, idx), reject);
        } else {
    
    
          handleResolve(promise, idx);
        }
      });
    });
  }

  static race<U>(promises: (U | PromiseLike<U>)[]): MyPromise<U> {
    
    
    return new MyPromise<U>((resolve, reject) => {
    
    
      promises.forEach(promise => {
    
    
        if (promise instanceof MyPromise) {
    
    
          promise.then(resolve, reject);
        } else {
    
    
          resolve(promise);
        }
      });
    });
  }
}

Of course, if we have doubts about part of the code in the editor, we can right-click and select Add to AddChat, and then enter our questions in the left dialog box. For example, I have doubts about the following code in the editor, and then askDevChat to help me answer my doubts.

  resolve: {
    
    
    alias: {
    
    
      '@': path.resolve(__dirname, 'src'),
      'components': path.resolve(__dirname, 'src/components'),
    },
    extensions: ['.js', '.json', '.ts', '.vue'], // 使用路径别名时想要省略的后缀名,可以自己 增减
  },

Insert image description here

You can see that after clickingAdd to AddChat, the input box on the left contains multiple icon contents, which mainly record your operations.

Here areDevChat’s answers:

This code sets the configuration of path aliases (alias) and default file suffixes (extensions) in a project using Vite.

  • alias: This attribute allows you to create some path aliases. When you reference this path, you can use the alias instead of the real path. For example, in this code, ‘@’ represents the ‘src’
    directory and ‘components’ represents the ‘src/components’ directory. So if you want to reference the 'Example.vue' file in the 'src/components'
    directory in your project, you can do this: import Example from
    ' components/Example.vue' or import Example from '@/Example.vue'.

  • extensions: This attribute can set some default file suffixes. For example, in this code, the file suffixes of '.js', '.json', '.ts',
    '.vue' are set, so that when referencing files, These suffixes are omitted. For example, import Example from
    ‘@/Example’, the system will automatically try to load files with ‘src/Example’ + these suffix names.

The configuration of both options is used to simplify path references and improve code readability.

DevChatTo answer the question, this form does not require us to search for the answer to the question through a search engine. It is really efficient!

at last

After experiencing it, I really feel the power of artificial intelligence. Improving development efficiency is the comprehensive quality of every programmer. In the era of Internet cost reduction and efficiency improvement, I hope that each of our programmers can follow the trend, work more efficiently, reduce wasted work, and use their own value in a meaningful way!

Guess you like

Origin blog.csdn.net/qq_38951259/article/details/134107580