React开发vscode配置settings.json

414 阅读2分钟

插件

koroFileHeader

在vscode中用于生成文件头部注释和函数注释的插件,经过多版迭代后,插件:支持所有主流语言,功能强大

 "fileheader.configObj": {
   "autoAdd": true,
   "autoAlready": true,
   "prohibitAutoAdd": [
     "json",
     "md"
   ], //禁止json、md文件自动添加头部注释
   "createFileTime": true,
   "dateFormat": "YYYY-MM-DD HH:mm:ss",
   "moveCursor": true,
 },
"fileheader.cursorMode": {//此为头部注释
  "Description": "",
  "param": "",
  "return": ""
},
"fileheader.customMade": {//此为函数注释
  "Author": "yangmiaomiao",
  "Date": "Do not edit",
  "LastEditors": "yangmiaomiao",
  "LastEditTime": "Do not edit",
  "Description": ""
},

Vetur

VSCode下强大的Vue开发工具

vue-helper

Atom One Dark Theme

vscode开发主体色

ES7 React/Redux/GraphQL/React-Native snippets

一键生成react代码块以及快速补全react代码

Highlight Matching Tag

实时高亮匹配标签

HTML Snippets

"files.associations": {
  "*.cjson": "jsonc",
  "*.wxss": "css",
  "*.wxs": "javascript",
  "*.wxml": "wxml",
  "*.js": "javascript",
  "*.vue": "vue"
},

Path Intellisense

路径提示

uniapp-snippet

api提示

ESlint

vscode 高效开心开发uniapp

GitLens

了解 git 的提交历史

settings.json

{
    "workbench.startupEditor": "newUntitledFile",
    "workbench.colorTheme": "Atom One Dark",
    "extensions.ignoreRecommendations": true,
    "explorer.confirmDelete": true,
    // 配置emmet是否启用tab展开缩写
    // vscode已经内置emmet,这一设置最大作用是:当输入的文本不属于Emmet定义的缩写规则时,依然允许使用Tab键进行扩展。此时会提示自定义的缩写语句,以及各插件自定义的缩写语句.
    "emmet.triggerExpansionOnTab": true,
    "emmet.showSuggestionsAsSnippets": true, // 是否将自定义的代码片段作为提示建议显示。
    "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "wxml": "html",
        "jsx-sublime-babel-tags": "javascriptreact", // 在 react 的jsx中添加对emmet的支持
    },
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html",
        "javascript": "javascriptreact",
    },
    "breadcrumbs.enabled": true,
    "explorer.confirmDragAndDrop": true,
    "terminal.integrated.rendererType": "dom",
    "vsicons.dontShowNewVersionMessage": true,
    "workbench.iconTheme": "vscode-icons",
    "workbench.activityBar.visible": true,
    "fileheader.configObj": { //去除注释文件
        "autoAdd": false,
        "autoAlready": true,
        "prohibitAutoAdd": [
            "json",
            "md"
        ],
        "createFileTime": true,
        "dateFormat": "YYYY-MM-DD HH:mm:ss",
        "moveCursor": true,
    },
    "fileheader.cursorMode": { //此为头部注释
        "Description": "",
        "param": "",
        "return": ""
    },
    "fileheader.customMade": { //此为函数注释
        "Author": "yangmiaomiao",
        "Date": "Do not edit",
        "LastEditors": "yangmiaomiao",
        "LastEditTime": "Do not edit",
        "Description": ""
    },
    "files.associations": {
        "*.cjson": "jsonc",
        "*.wxss": "css",
        "*.wxs": "javascript",
        "*.wxml": "wxml",
        "*.js": "javascript",
        "*.vue": "vue"
    },
    "vetur.format.defaultFormatter.html": "prettier",
    "vetur.format.defaultFormatter.pug": "prettier",
    "vetur.format.defaultFormatter.css": "prettier",
    "vetur.format.defaultFormatter.postcss": "prettier",
    "vetur.format.defaultFormatter.scss": "prettier",
    "vetur.format.defaultFormatter.less": "prettier",
    "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
    "vetur.format.defaultFormatter.js": "prettier",
    "vetur.format.defaultFormatter.ts": "prettier",
    "vetur.format.defaultFormatter.sass": "sass-formatter",
    "vetur.format.options.tabSize": 4,
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "semi": false,
            "singleQuote": true
        },
        "js-beautify-html": {
            "wrap_line_length": 60,
            "wrap_attributes": "auto",
            "end_with_newline": true
        },
        "prettyhtml": {
            "printWidth": 120, //一行的长度超过120,在换行
            "singleQuote": true,
            "wrapAttributes": false,
            "sortAttributes": false
        }
    },
    "editor.tabSize": 4,
    "editor.fontSize": 12,
    "editor.renderWhitespace": "none", //显示空格和tab符
    "editor.formatOnSave": true, //#每次保存的时候自动格式化
    "editor.formatOnPaste": true, // 粘贴后的内容, 是否自动格式化
    //配置eslint
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue",
    ],
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "editor.folding": true,
    "prettier.tabWidth": 4,
    "prettier.arrowParens": "avoid",
    "prettier.bracketSpacing": false,
    "prettier.semi": false,
    "prettier.singleQuote": true,
    "prettier.useTabs": true,
    "prettier.printWidth": 120,
    "prettier.htmlWhitespaceSensitivity": "ignore",
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[less]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "search.followSymlinks": false,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "javascript.preferences.quoteStyle": "single",
    "typescript.updateImportsOnFileMove.enabled": "always",
    "typescript.preferences.quoteStyle": "single",
    "window.zoomLevel": 2,
    "typescript.suggest.paths": true,
    "minapp-vscode.disableAutoConfig": true, // 微信小程序是否自动配置
    "git.ignoreRebaseWarning": true,
    "git.confirmSync": false,
    "git.enableSmartCommit": true,
    "path-intellisense.extensionOnImport": true,
    "path-intellisense.absolutePathToWorkspace": true,
    "search.exclude": {
        // VScode进行文件搜索时,不搜索这些区域。
        "**/node_modules": true,
        "**/bower_components": true,
        "**/*.code-search": true,
        "**/.DS_Store": true,
        "**/.git": true,
        "**/.gitignore": true,
        "**/.idea": true,
        "**/.svn": true,
        "**/.vscode": true,
        "**/build": true,
        "**/dist": true,
        "**/tmp": true,
        "**/yarn.lock": true,
        "**/assets": true
    },
}