前端开发中常用VSCode插件及配置

常用插件

• Auto Import
• Auto Close Tag：自动关闭标签
• Auto Rename Tag：自动重命名标签名称
• Bookmarks
• Bracket Pair Colorizer
• Code Runner
• Code Spell Checker：拼写检查
• CSS Peek
• Debugger for Chrome
• DotENV：对.env文件进行语法高亮
• ESLint
• filesize: 查看文件大小
• Git History
• Git Project Manager
• GitLens: 查看git的修改记录
• HTML Boilerplate
• Image preview
• lit-html
• Live Server: 为静态和动态页面启动具有实时重载功能的开发本地服务器
• npm Intellisense
• Paste JSON as Code
• Path Intellisense：自动完成路径
• Prettier - Code formatter
• React Native Tools
• SVG Viewer
• Terminal：命令行工具
• Todo Tree：以树状结构展示TODO、FIXME 等
• Trailing Spaces：高亮空格
• TypeScript Hero
• Vetur
• koroFileHeader：用于生成文件头部注释和函数注释
• Color Info：提供在 CSS 中使用颜色的相关信息。只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息
• Regex Previewer：用于实时测试正则表达式的实用工具。它可以将正则表达式模式应用在任何打开的文件上，并高亮所有的匹配项
• VSCode Great Icons: 图标

配置文件 settings.json

{
  // 配色、图标、字体以及其他外观配置
  "editor.cursorStyle": "line",
  "editor.fontFamily": "Fira Code",
  "editor.fontLigatures": true,
  "editor.fontSize": 16,
  "editor.lineHeight": 24,
  "editor.lineNumbers": "on",
  "editor.minimap.enabled": true,
  "editor.renderIndentGuides": true,
    "editor.rulers": [120],
    "workbench.iconTheme": "vscode-great-icons",
    "workbench.colorTheme": "Solarized Dark",
    "editor.tabSize": 2,
    "editor.wordWrap": "wordWrapColumn",
    "editor.wordWrapColumn": 120,
    // 智能提醒
    "editor.quickSuggestions": {
        "other": true,
        "comments": true,
        "strings": true
    },
    // 是否允许滚动到最后一行
    "editor.scrollBeyondLastLine": false,
    // 保存时自动格式化，在vue项目中如果配置了eslint规则，会与上面“自动修复不符合eslint规则的错误”规则冲突
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
    "vetur.format.defaultFormatter.js": "prettier-eslint",
    // vue文件默认使用vetur进行格式化，只有设置该规则，下方的规则才生效
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    "vetur.format.defaultFormatterOptions": {
        // 对 vue 文件的 js 部分进行格式化限制
        "prettier": {
            "printWidth": 120, // 250个字符进行换行
            "semi": false, // 语句是否以分号结束
            "singleQuote": true, // 是否使用单引号
            "wrapAttributes": false, // 标签不换行
            "eslintIntegration": true
        },
        // 对 vue 文件的 template 部分进行格式化限制
        "prettyhtml": {
            "printWidth": 120,
            "wrapAttributes": false
        }
    },
    "prettier.jsxSingleQuote": true,
    "prettier.semi": false,
    "prettier.singleQuote": true,
    "prettier.useTabs": true,
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    // esbenp.prettier-vscode vscode.typescript-language-features
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    // 头部文件注释
    "fileheader.customMade": {
        "Description": "",
        "Date": "",
        "LastEditTime": ""
    },
    // 自动添加文件头部注释(可选项)
    "fileheader.configObj": {
        "autoAdd": false // 将该选项设置为true即可开启
    },
    "explorer.confirmDelete": false,
    "terminal.integrated.rendererType": "dom",
    "editor.suggestSelection": "first",
    "files.associations": {
        "*.cjson": "jsonc",
        "*.wxss": "css",
        "*.wxs": "javascript"
    },
    "emmet.includeLanguages": {
        "wxml": "html",
        "vue-html": "html",
        "javascript": "javascriptreact",
        "plaintext": "jade"
    },
    "cSpell.userWords": ["xiangg*/"],
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    // 格式化时文件末尾保留一行空行
    "html.format.endWithNewline": true,
    "git.autofetch": true,
    "git.confirmSync": false
}

由于个人编码习惯，js中不以分号结束、使用单引号代替双引号，所以在配置文件中进行了设置。大家可以根据个人习惯或者团队要求进行配置。