Good tool software can make work and life easier and more efficient. The following are the plug-ins and their tools that I feel can greatly improve development efficiency and save a lot of time during the development process. The following are just personal opinions. I want to give you some of my own experience and help you for your reference. Don’t spray if you don’t like it!
一、Visual Studio Code
Visual Studio Code is a free, lightweight code editor that is a must-have tool for front-end developers. VS Code supports various programming languages, and you can download and use a large number of plug-ins, making it very impressive and easy to use!
advantage:
1. It has excellent code completion and prompt functions!
2. It has a powerful debugging function and Git integration (that is, you can configure git to use the git function in the current tool)!
3. Built-in integrated terminal, you can write and run code in one application at the same time!
4. The community is relatively active and open source, and many users have contributed high-quality extensions and themes!
5. Support multiple languages to develop vue, react, angler, jQuery...
shortcoming:
1. The version of the computer system is low or the computer is relatively old, which may cause a bad operating experience.
Instructions:1. Download and install Visual Studio Code.
2. Open the project folder, and open the folder in VS Code by clicking the Explorer icon on the left navigation bar.
3. To edit the code, open any file or directory to be edited by double-clicking.
4. To debug the code, press F5 to start the debugger, and set breakpoints while debugging, etc.
5. To install extensions, click the extension icon in the lower left corner to search for and install the required extensions.
2. Chrome Developer Tools
Chrome Developer Tools is a set of development tools built into Google Chrome that can help front-end developers debug and analyze websites. It is a full-featured debugger and enables live editing and modification of CSS and JavaScript.
advantage:
1. You can check the style and layout attributes of elements!
2. It can clearly display network request and response information!
3. You can test the responsiveness of the page by simulating the device!
4, you can automatically capture screenshots for the website!
5. Support command line interface, which can quickly conduct code review and testing!
shortcoming:
1. Chrome browser uses too much memory, install driver-level system services!
2. Mandatory automatic update (every time a major version is updated, it is easy to cause the extension to be unusable or incompatible with some websites, the browser crashes, and freezes)!
3. Sometimes it will not prompt to update, and you will find that you cannot open the webpage and display a blank page!
Instructions:
1. Open the Chrome browser and enter the website to be debugged.
2. Click the three vertical dots button in the upper right corner of the browser window.
3. Select "More Tools" → "Developer Tools" from the drop-down menu.
4. Try various options in the developer tools to see different functions.
3. CodePen
CodePen is an online community for front-end developers to share, learn, and practice their coding skills. Users can create HTML, CSS and JavaScript code snippets and interact with other users.
advantage:
1. Quickly build prototypes, test, and share code snippets
2. There are many common libraries and frameworks built in, such as jQuery, Bootstrap, etc.
3. Can work collaboratively, share code with other users and see their progress
4. Very suitable for novices to learn and explore front-end development.
shortcoming:
1. Unable to perform complete version control: CodePen is mainly used to create and share code snippets, but it does not provide complete version control functions like other code hosting platforms (such as GitHub, GitLab, etc.). If you need stricter version control for your project, other code hosting platforms are recommended.
2. Difficult to keep private: CodePen has various sharing levels, most of which are public. This means other users can easily view and use your code. If you need to secure your code and ensure they are not publicly accessible, CodePen may not be the best choice.
3. There may be dependency issues: Although CodePen has built-in many common libraries and frameworks, such as jQuery and Bootstrap, it may not meet all development needs. This means that you may need to add external dependencies to your code and resolve dependencies at runtime, which may cause some problems.
Instructions:
1. Enter CodePen official website and register an account.
2. Create a new Pen and start writing HTML, CSS and JavaScript code.
3. Store and share your code snippets.
4. Git
Git is a popular distributed version control system that helps developers manage code and collaborate with other developers. It makes it easy to track change history, roll back bugs, and merge code.
advantage:
1. Distributed: Every developer can clone the complete code base locally, make changes and commit. This makes teamwork more efficient, and commits and version control can be done even without a network connection.
2. Reliability: Git uses hash values to store the history of files, so any changes to any file can be traced to its detailed records. It's also easy to restore historical versions, and roll back bad commits.
3. Fast: The design idea of Git is very simple. It only pays attention to changes in file content and stores differences. Compared with traditional version control tools such as SVN, it is very fast when executing commands and switching branches.
4. Convenience: Git provides many practical functions, such as branch management, label management, merge conflict resolution, etc., which can facilitate team collaboration and version control.
5. Community support: Git is an open source tool with a huge developer and user community around the world, providing rich documentation, tutorials and plug-ins.
shortcoming:
1. The learning curve is steep: Git’s design ideas and grammatical structure are different from other version control tools, and beginners may need some time to adapt and master.
2. Command line tools: Git is mainly operated through command line tools, which may not be friendly to some non-technical personnel or novices, and requires a certain learning cost.
3. Large-scale project management: In large-scale projects, Git may require more memory and hard disk space, as well as more complex branch management strategies and version control methods.
Instructions:
1. Install Git: Visit Git official website ( https://git-scm.com/downloads) Git.
2. Create a code base: Create a new code base on a local or remote server and clone it locally.
3. Add files: Add, modify or delete files in the local code base, and use the git add command to add these files to the index.
4. Submit changes: Submit the changes of the files through the git commit command, and add a relevant submission information description.
5. Branch management: Use the git branch command to create, switch and merge branches for team collaboration and version control.
6. Publish code: Use the git push command to push the changes in the local code base to the remote server.
7. Version rollback: When needed, use the git revert and git reset commands to roll back the wrong commit or version.
5. Webpack
Webpack is a popular module packaging tool that can package multiple front-end resources (such as CSS, JavaScript, and images) into a single file, reducing the number of HTTP requests and file size when deploying.
advantage:
1. Modular support: Webpack supports various module systems, such as CommonJS, AMD, ES6, etc., and can package them into a single file suitable for browser loading. This makes it easier for developers to manage code dependencies and modularity.
2. Dynamic loading: Webpack can realize on-demand loading and asynchronous loading through technologies such as dynamic import and code splitting, which reduces the startup time of the application and the amount of network transmission.
3. Code conversion: Webpack can use various loaders to convert and compile source code. For example, Babel can compile ES6 into ES5, and CSS preprocessor loader can compile Sass or Less into CSS.
4. Plug-in extension: Webpack provides various plug-ins (plugins) to extend its functions, such as compressing code, extracting common code, automatically generating HTML files, etc. These plug-ins can greatly improve development efficiency and performance optimization.
5. Community support: Webpack is a popular open source project with a wide community of users and developers around the world, providing many examples, tutorials, and plugins.
shortcoming:
1. Complex configuration: Compared with other packaging tools, the configuration of Webpack is more complicated, and beginners may need to spend more time and energy to understand its principles and configuration methods.
2. Performance issues: In some cases, the file size after Webpack packaging may be larger than other packaging tools, and certain performance optimization strategies are also required.
3. Command line tools: Unlike other front-end tools, Webpack is mainly operated through command line tools, which may not be friendly to non-technical personnel or novices.
Instructions:
1. Install Webpack: Use npm or yarn to install Webpack to the local environment.
2. Configure Webpack: Create a webpack.config.js file in the project, and configure relevant parameters according to requirements.
3. Loader (loader): According to the needs of the project, use the corresponding loader to handle dependencies between modules or other tasks.
4. Plug-in (plugin): According to project requirements, various plug-ins are used to enhance Webpack functions.
5. Packaging and building: use command line tools to execute Webpack packaging and building, and generate final deployable code files.
Six, ESLint
ESLint is a configurable JavaScript code inspection tool that helps developers follow coding standards, find potential problems and errors, and improve code quality.
advantage:
1. Customizability: ESLint provides a large number of rules and plug-ins, which can be customized according to the needs of the development team or project, so as to better follow the coding standards and check potential problems.
2. Easy to integrate: ESLint can be integrated with various editors, build tools and continuous integration tools (such as VS Code, Webpack, Jenkins, etc.) for quick code checking and error prompting.
3. Cross-platform support: ESLint supports multiple operating systems and Node.js versions, and can be applied to various JavaScript frameworks and libraries.
4. Community support: ESLint is a popular open source project with an extensive user and developer community around the world, providing many examples, tutorials, and plugins.
shortcoming:
1. High learning cost: ESLint configuration is relatively complicated, and it takes some time to understand its principles and usage methods.
2. Integration issues: Integrating ESLint may introduce some unnecessary troubles, for example, there may be conflicts with other tools, or some plugins may not be compatible with the new version of ESLint.
3. Performance issues: ESLint may consume more resources when analyzing code, which may affect the development process and performance.
Instructions:
1. Install ESLint: Use npm or yarn to install ESLint to the local environment.
2. Configure ESLint: Create a .eslintrc.js file in the project, and configure relevant parameters and rules according to requirements.
3. Integrate ESLint: Integrate it into editors or build tools for quick code checking and error prompts.
4. Run inspection: run the ESLint inspection command to inspect the code and output error message.
7. UmiJS
UmiJS is a pluggable enterprise-level React application framework that helps developers quickly build web applications.
advantage:
1. Rapid development: UmiJS has built-in many commonly used functions and plug-ins, such as routing, data mock, front-end construction, etc., which can help developers quickly build web applications.
2. Easy to expand: UmiJS provides a rich plug-in system, and various plug-ins can be customized and installed according to needs, so as to better meet project needs and improve scalability.
3. Stability: UmiJS has experienced long-term open source community contributions and stability tests, and has been tested in a large-scale production environment, with good stability and reliability.
4. Community support: UmiJS is a popular open source project with a wide community of users and developers around the world, providing many examples, tutorials and plugins
shortcoming:
1. High learning cost: UmiJS configuration is relatively complicated, and it takes some time to understand its principles and usage methods.
2. Low customizability: As a framework, UmiJS has built-in many commonly used functions and plug-ins, but sometimes it may not be able to meet some special needs.
3. Performance issues: UmiJS may consume more time and resources when packaging and building, affecting the development process and performance.
Instructions:
1. Install UmiJS: Use npm or yarn to install UmiJS to the local environment.
2. Create a UmiJS application: Create a new UmiJS application using the command line tool, and choose to install various plug-ins and templates as required.
3. Configure UmiJS: Create a config.js file in the project, and configure relevant parameters and rules according to requirements.
4. Use UmiJS: Use the functions such as routing and page components provided by UmiJS to develop and build Web applications.
Eight, postman
Postman is a powerful API interface testing tool that can help developers conduct interface testing and debugging more easily. Although the learning cost is high, using it in a proper way can improve development efficiency and code quality.
Note: Although the backend of this tool is often used, in the development process, the code value returned by the interface cannot accurately locate the novice frontend. Whether the interface given to you by the backend is wrong or something is wrong with your own, use it to solve our frontend It is very good to ask questions, so that we can avoid the embarrassing situation when we finally search for a long time during the joint debugging and say that it is our own problem!
(Interface problems that can be analyzed by using postman:
1. The backend changed the interface path and the frontend didn't know about it!
2. The parameter interface document has not been updated in time after the backend has changed!
3. The parameters passed by the front end are wrong!
4. The remote address of the front-end request back-end is incorrect!
5. The front end wrote the request path wrong!
6. No Internet!
......）
advantage:
1. Powerful functions: Postman supports multiple HTTP request methods, parameter passing, request header setting, data formatting and other functions, and can generate test reports, Mock data and collaboration, etc.
2. Ease of use: Postman has an easy-to-use user interface and intuitive operation mode, and provides comprehensive documentation and tutorials to help developers get started quickly.
3. Cross-platform support: Postman can run on multiple operating systems and browsers, and has good support for various Web protocols and data formats.
4. Good integration experience: Postman provides developers with a very convenient integration experience for API debugging and interface testing, and it also has good integration with third-party tools (such as GitLab).
shortcoming:
1. High learning cost: Postman involves many complicated configurations and rules, and it takes a long time for beginners to learn.
2. Restricted use scenarios: Postman is mainly designed for API interface testing, and is not suitable for other types of testing or automated scripting.
3. Performance issues: Postman may have performance issues when processing large amounts of data and high concurrent requests, which may need to be solved by optimizing configuration or using other tools.
Instructions:
1. Download Postman: Download and install Postman from the official website to the local environment.
2. Create request: create a new request in Postman, including request method, parameters and header settings, etc.
3. Send request: send a request to the server, and obtain information such as response data and status code.
4. Testing and debugging: test and debug according to requirements, and generate test reports or mock data, etc.
Nine, npm
npm is a powerful Node.js package management tool that helps developers manage and maintain various project dependencies and modules more easily. Although there are some performance and security risk issues, using it in a proper way can improve development efficiency and code quality.
advantage:
1. Convenience: npm provides a large number of modules and packages, and developers can easily download, install and manage these modules and dependencies through this tool.
2. Community support: npm has a huge community and user groups, has a wide range of applications and contributions around the world, and constantly updates and maintains various modules and plug-ins.
3. Ease of use: npm commands are simple and easy to understand, and can easily complete tasks such as dependency management, packaging, building, and publishing. It is suitable as a package manager for front-end projects.
4. Customizability: npm supports custom configuration and parameter settings, which can be adjusted and optimized according to needs.
shortcoming:
1. Compatibility issues: In some cases, different versions of npm may have compatibility issues, requiring additional adjustments and optimizations.
2. Security risks: Due to the large number of modules and packages on npm, there may be some unsafe or malicious codes that need to be reviewed and protected.
3. Performance issues: When dealing with large projects and dependencies, npm may have performance issues and difficulties in upgrading dependencies.
Instructions:
1. Install Node.js: First install Node.js in the local environment to use the npm command line tool.
2. Initialize the project: Execute the npm init command in the project root directory to initialize a new Node.js project.
3. Add dependencies: Use the npm install command to add the required dependencies, and specify the version and whether to save it to the package.json file.
4. Update dependencies: Use the npm update command to update project dependencies, and perform version control and locking according to requirements.
5. Publish package: Use the npm publish command to publish the module or package you write to npm for other developers to use.
Ten, sass
Sass is a popular CSS preprocessor that helps developers write and maintain complex CSS styling code more easily. Although the learning cost is high, using it in a proper way can improve development efficiency and code quality.
advantage:
1. Readability: Sass supports the use of variables, functions, and mixers, making it easier to write and maintain complex CSS style codes.
2. Reusability: Sass provides a variety of commonly used style libraries and frameworks, such as Bootstrap and Foundation, etc., which can provide users with component-based reusable style design.
3. Easy to expand: Sass can be customized and extended according to user needs, for example, by introducing plug-ins or custom functions to increase its functionality and flexibility.
4. Compatibility: The CSS files generated by Sass are the same as the native CSS files, compatible with various browsers and devices.
shortcoming:
1. High learning cost: Sass involves many new grammars and concepts, and beginners need to spend some time and effort to understand its characteristics and usage methods.
2. Compilation time: Sass needs to go through the compilation process to generate the final CSS file, which may affect development efficiency and performance.
3. Tool dependency: The use of Sass needs to rely on third-party tools, such as Sass compilers, build tools, and editor plug-ins, which may cause version and compatibility issues.
Instructions:
1. Install Sass: Use tools such as npm or yarn to install Sass to the local environment.
2. Write Sass style files: Write Sass files in the project, and introduce variables, functions, mixers, etc. as needed.
3. Compile the Sass file: Use the Sass compiler to compile the Sass file into the final CSS file and store it in the specified directory.
4. Import CSS file: import the generated CSS file in the HTML file so that the style can be applied.
Summarize:
1. Code editor: Visual Studio Code , Sublime Text ...
2. Browser: Google Chrome , Firefox ...
3. Debugging tools: Chrome DevTools, Firefox Developer Edition , Safari Web Inspector ...
4. Version control system: Git , SVN ...
5. Package manager: npm , Yarn ...
6. Automated build tools: Webpack , Grunt , Gulp ...
7. CSS preprocessor: Sass , Less ...
8. UI libraries and frameworks: Bootstrap , Foundation , Materialize ...
9. JavaScript framework: React , Vue.js , Angular ...
10. Front-end component library: jQuery , Lodash , ElementUi , Antdesign , Echarts (visualization), G6 ...
The above is my summary, if it is helpful to everyone, it is worth it!