vscode开发vue和react插件汇总

白水螺丝
721 阅读2分钟

vscode开发vue和react插件汇总

Vue篇

  • Vetur插件

这个插件能让.vue文件变得高亮。但是这个插件无法格式化

Vue文件片段

创建vue文件的模板。在vscode中，setting->user sinppets 在搜索框中添加vue.json，并将下属文本替换即可。然后在新建的文件中，输入vue就能快速创建代码片段。

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<!-- $1 -->",
            "<template>",
            "<div></div>",
            "</template>",
            "",
            "<script>",
            "export default {",
            "props:{},",
            "data() {",
            "return {",
            "",
            "}",
            "},",
            "//生命周期 - 创建完成（访问当前this实例）",
            "created() {",
            "",
            "},",
            "//生命周期 - 挂载完成（访问DOM元素）",
            "mounted() {",
            "",
            "},",
            "methods:{}",
            "}",
            "</script>",
            "<style lang=\"less\" scoped>",
            "/* @import url(); 引入css类 */",
            "$4",
            "</style>"
        ],
        "description": "Log output to console"
    }
}

react篇

  • ES7 React/Redux/GraphQL/React-Native snippets

React体系的语法提示插件

通用篇

  • javaScript(ES6)code snippets

Es6语法提示插件

  • prettier插件

这是一个格式化很全面的插件，可以将如下文件进行格式化 JavaScript ,TypeScript ,Flow , JSX , JSON, CSS , SCSS , Less, HTML , Vue , Angular ,GraphQL , Markdown , YAML

prettier配置起来也很方便，可以按照工程进行配置，也可以按照vscode全局进行配置。如果按照工程进行配置，只需要在工程根目录下添加.prettierrc文件即可。如果是按照全局配置，则在vscode的setting中编写用户setting。内容可以大致如下：

{
    // 使能每一种语言默认格式化规则
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[less]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },

    /*  prettier的配置 */
    "prettier.printWidth": 100, // 超过最大值换行
    "prettier.tabWidth": 4, // 缩进字节数
    "prettier.useTabs": false, // 缩进不使用tab，使用空格
    "prettier.semi": true, // 句尾添加分号
    "prettier.singleQuote": true, // 使用单引号代替双引号
    "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
    "prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
    "prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
    "prettier.disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置
    "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
    "prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
    "prettier.htmlWhitespaceSensitivity": "ignore",
    "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
    "prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
    "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
    "prettier.parser": "babylon", // 格式化的解析器，默认是babylon
    "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
    "prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
    "prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
    "prettier.tslintIntegration": false // 不让prettier使用tslint的代码格式进行校验
}
  • Auto Close Tag

标签自动补全的插件

  • Auto Rename Tag

标签自动修改的插件

  • Bracket Pair ColorZer

括号识别插件，带有颜色区分，非常的实用

  • Path Intellisense

路径补全插件

  • code runner

能在vscode直接通过node运行js

  • LiveServer

能在vscode中将html直接通过server运行

avatar
文章
阅读
粉丝