前端开发常用VSCode插件

常用插件

• Vetur
• Prettier - Code formatter
• Terminal：命令行工具
• DotENV：对.env文件进行语法高亮
• Code Spell Checker：拼写检查
• Path Autocomplete：自动完成路径
• Auto Rename Tag：自动重命名标签名称
• Auto Close Tag：自动关闭标签
• GitLens: 查看git的修改记录
• PHP Intelephense
• PHP IntelliSense
• koroFileHeader：用于生成文件头部注释和函数注释
• Todo Tree：以树状结构展示TODO、FIXME 等
• Color Info：提供在 CSS 中使用颜色的相关信息。只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息
• Regex Previewer：用于实时测试正则表达式的实用工具。它可以将正则表达式模式应用在任何打开的文件上，并高亮所有的匹配项

配置文件 settings.json

{
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.wordWrap": "wordWrapColumn",
  "editor.wordWrapColumn": 250,
  // 滚动到最后一行
  "editor.scrollBeyondLastLine": false,
  "html.format.endWithNewline": true,
  // 保存时自动格式化
  "editor.formatOnSave": true,
  "vetur.format.defaultFormatterOptions": {
    // 对 vue 文件的 js 部分进行格式化限制
    "prettier": {
      "printWidth": 250, // 250个字符进行换行
      "semi": false, // 语句去掉分号结束
      "singleQuote": true, // 使用单引号
      "wrapAttributes": false // 标签不换行
    },
    "prettyhtml": {
      "printWidth": 250,
      "wrapAttributes": false
    }
  },
  "prettier.semi": false, // 语句去掉分号结束
  "prettier.singleQuote": true, // 使用单引号
  "prettier.jsxSingleQuote": true,
  "prettier.printWidth": 250, // 250个字符进行换行
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "intelephense.format.enable": false,
  // 头部文件注释
  "fileheader.customMade": {
    "Description": "",
    "Author": "cyt",
    "Date": "",
    "LastEditTime": "",
    "LastEditors": "cyt"
  },
  // 自动添加文件头部注释(可选项)
  "fileheader.configObj": {
    "autoAdd": true // 将该选项设置为true即可开启
  }
}

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