VS Code前端常用插件

VS Code

VS Code官网
新版 html:5生成html基础框架
设置 —— emmet —— 12个选项没有打√的全部选中（tab生成并有语法预览）

需要下载的插件

• Chinese ——中文插件
• CSS Peek ——标签出错显示
• Auto Rename Tag ——自动同步命名末尾标签
• open in browser ——浏览器打开网页
• Live Server ——服务器打开网页
• auto close tag ——自动补全标签
• JavaScript（ES6）code snippets ——ES6代码提示
• Color Highlight —— css高亮颜色

    "indentRainbow.colors": [
        "rgba(117,118,172,0.2)",
        "rgba(251,35,11,0.2)",
        "rgba(42,238,61,0.2)",
        "rgba(229,239,22,0.2)",
    ],

• Bookmarks —— 书签跳转（小白不用下）

• Live Sass Compiler —— sass转码css

• Material Icon Theme —— 文件主题图标

• ESlint插件 —— 语法校验（es文件中修改）

• module.exports = {
    root: true,
    env: {
      node: true,
    },
    extends: [
      "plugin:vue/vue3-essential",
      "eslint:recommended",
      "plugin:prettier/recommended",
    ],
    parserOptions: {
      parser: "@babel/eslint-parser",
    },
    rules: {
      "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
      "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
      "endOfLine": "auto",
      "vue/multi-word-component-names": "off"
    },
  };
  

• Path Autocomplete —— 自动补全插件名称

• Prettier - Code formatter —— 格式化文档

• Vetur —— Vue高亮显示

• Trailing Spaces —— 多余空格提示

• 代码提示框。右上角点开即可
  
  设置代码规范，settings.json