【前端工程化】- 2 -VSCode插件

严狐若

2023-12-01

2 - VSCode 插件

如果使用好了 VSCode 插件，可以让写代码时不仅美观统一，还能帮助避免一些常见错误。
这里列举了一些目前觉得好用的 VSCode 插件，以供参考。

代码检查和美化：

1. ESLint

主要针对 JS & JSX，非常心水它的美化代码和 Auto Fix on Save，同时也可以在 .eslintrc.js 中配置一些规则，让代码统一、规范，比如每个函数的最大行数可以强制对复杂的方法进行拆分，对多人协作很有帮助
详细规则配置等参考官网 http://eslint.cn/
tslint: 用来检查 typescript 的语法规范

2. vscode-styled-components

这个是针对 styled-components 的语法进行高亮和自动补全，替代了默认的 styled-components 的啥都没有的纯 string 写法
其他 css 可以使用 styleLint

3. stylelint

CSS / SCSS / Less 语法检查

4. Prettier

用来一键美化 JS/TS/CSS 代码

代码补全和 Shortcuts：

因为平时工作中以 React 为主，所以会倾向于 React 相关补全插件

5. ES7 React/Redux/GraphQL/React-Native snippets

提供了一些常用的 methods 的 prefix，以便非常方便的创建一个 Component

6. npm Intellisense

用来自动补全 npm 安装的包名

7. Auto Rename Tag / Auto Close Tag

自动修改匹配的 HTML 标签，自动闭合 html 标签

外观：

8. Bracket Pair Colorizer

给嵌套的各种括号加上不同的颜色，在眼花缭乱的括号中迅速定位

9. Highlight Matching Tag

高亮对应的 HTML 标签和标识出对应的各种括号的功能。

10. Markdown Preview

实时预览 markdown。

11. Material Theme：

主题，可以随便调一下，选个顺眼的

12. Material Icon Theme：

文件管理器的图标

其他：

13. GitLens

用来查看代码变化，更多的时候用于找出这是谁干的！以及发现一些有趣的已经不在公司的从未谋面的前同事的名字

14. TODO

用来顺手 mark 一下，等之后再补齐

Below to be updated：

网上找的外观相关的设置，准备尝试一下：

{
    "editor.multiCursorModifier": "ctrlCmd", // 按住 ctrl 键双击鼠标 可添加多个 highlight 
    "editor.formatOnPaste": false,
    "workbench.activityBar.visible": false,
    "workbench.iconTheme": "eq-material-theme-icons-darker", // 工作栏的icon
    "workbench.colorCustomizations": {},
    "materialTheme.cache.workbench.settings": {
        "themeColours": "Darker",
        "accentPrevious": "Acid Lime"
    },
    "workbench.colorTheme": "Material Theme Darker",
    "material-icon-theme.angular.iconsEnabled": true,
    "material-icon-theme.folders.icons": "specific",
    "editor.lineHeight": 24,
    "editor.fontLigatures": true,
    "editor.fontFamily": "FiraCode-Medium"
}

一些键盘技巧，觉得很有用：
移动光标到文件首尾部：ctrl + up/down
移动光标到该行首尾部：ctrl + left/right
按单词移动：alt + left/right
Reference：
https://juejin.im/post/5bc55606e51d450e853075c9#heading-0