使用 VSCode 进行 Laravel 开发
45

上视频地址(免费的):https://laracasts.com/series/visual-studio-code-for-php-developers

1,先安装所有的扩展

  • 将下面的扩展全部安装完

https://marketplace.visualstudio.com/items?itemName=dkundel.vscode-new-file

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils

https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

https://marketplace.visualstudio.com/items?itemName=ryannaddy.laravel-artisan

https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme

https://marketplace.visualstudio.com/items?itemName=junstyle.php-cs-fixer

https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug

https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client

https://marketplace.visualstudio.com/items?itemName=dbaeumer.jshint

https://marketplace.visualstudio.com/items?itemName=smlombardi.slime

https://marketplace.visualstudio.com/items?itemName=nikitaKunevich.snippet-creator

https://marketplace.visualstudio.com/items?itemName=octref.vetur

https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons

2.个人设置

- code-首选项-设置 或者 command+(逗号键) 将以下内容复制到右边的一栏

{
    "editor.fontSize": 15,
    "workbench.colorTheme": "Material Theme",
    "workbench.statusBar.visible": false,
    "explorer.openEditors.visible": 0,
    "workbench.activityBar.visible": false,
    "editor.minimap.enabled": false,
    "terminal.integrated.fontSize": 14,
    "terminal.integrated.fontFamily": "Menlo, Monaco, 'Courier New', monospace",
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 3000,
    // File extensions to be parsed by the Typescript parser
    "importCost.typescriptExtensions": [
        "\\.vue$"
    ],
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue",
        "vue-html"
    ],
    "workbench.iconTheme": "eq-material-theme-icons",
    "editor.tabCompletion": true,
    "emmet.includeLanguages": {
        "vue-html": "html",
        "vue": "html"
    },
    "emmet.showExpandedAbbreviation": "always",
    "emmet.triggerExpansionOnTab": true
}

file

3.自定义快捷键设置

code-首选项-键盘快捷方式
file
打开这个json文件
复制如下内容

[
    {
        "key": "cmd+r",
        "command": "workbench.action.gotoSymbol"
    },
    {
        "key": "shift+cmd+o",
        "command": "-workbench.action.gotoSymbol"
    },
    {
        "key": "shift+cmd+r",
        "command": "workbench.action.showAllSymbols"
    },
    {
        "key": "cmd+t",
        "command": "-workbench.action.showAllSymbols"
    },
    {
        "key": "alt+enter",
        "command": "editor.action.showContextMenu",
        "when": "editorTextFocus"
    },
    {
        "key": "shift+f10",
        "command": "-editor.action.showContextMenu",
        "when": "editorTextFocus"
    }
]

file

4.添加ESLint

组合件 shift+command+p,输入 eslint,如图选项Enter
file
打开Eslint文件
复制以下内容

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/recommended"

    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "sourceType": "module"
    },
    "rules": {
        "no-const-assign": "warn",
        "no-this-before-super": "warn",
        "no-undef": "warn",
        "no-unreachable": "warn",
        "no-unused-vars": "warn",
        "constructor-super": "warn",
        "valid-typeof": "warn"
    }
}

file

5.用户自定义代码片段

code-首选项-用户代码片段-PHP
复制以下内容

{
    "Public function": {
        "prefix": "pubf",
        "body": [
            "public function $1($2)",
            "{",
            "\t$0",
            "}"
        ],
        "description": "Public function"
    },
    "Private function": {
        "prefix": "prif",
        "body": [
            "private function $1($2)",
            "{",
            "\t$0",
            "}"
        ],
        "description": "Private function"
    },
    "Protected function": {
        "prefix": "prof",
        "body": [
            "protected function $1($2)",
            "{",
            "\t$0",
            "}"
        ],
        "description": "Protected function"
    }
}

6.(可选)配置Material Theme主题

个人gist:
https://gist.github.com/wowiwj/7cb83c1938f7cf4cec67a0143be84d55

7.使用,有空慢慢更新...,慢慢补上

本帖由系统于 5个月前 自动加精
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 19

用过一次,止于配置。所幸这篇文章,又一次唤醒了,懒癌的我。。

9个月前
BradStevens

这个感觉前端的插件更多

9个月前

为什么不用phpstorm呢 喜欢折腾,为什么不用vim呢:wink:

9个月前

@jc91715 哈哈,我也是看Jeffery的视频感觉贼6才跟着搞的

9个月前

@BradStev 所以用这个全栈开发起来很爽啊:smile:

9个月前

@839891627 解决了ps在npm run watch的时候卡死的痛点:ghost:

9个月前

@王举npm run watch-pollnpm run watch 好很多 不会卡。另外vscode 你用多久写php,之前我也用了,没有坚持下去。主要2点,一,快捷键 太习惯phpstorm , 二,有一次写js的时候,vscode提示问题,比如他提示 btag,但是实际上是 Btag,不知道为啥大小写有问题,不敢用了。

9个月前

@颜⑧ 我也没多久,适应中哈哈,两个一起用最好:yum:

9个月前
Kurisu

开头的一排插件地址很有视觉冲击力.....:joy:

9个月前

watch的时候,是在 reindex, 我把 public 目录 exclude了,就不建索引了。。

9个月前

@839891627 可以可以

9个月前

目前是 PhpStorm, WebStorm, VS Code 配合用,已经忘了上一次打开 Sublime Text 是什么时候了。

9个月前
leo

从没遇到过 phpstorm 在 npm run watch 卡死的情况

9个月前

@leo 17.2.4好像好多了

9个月前

哈哈,是Jeffrey,我还以为我打错了。之前看他sublime text3的视频,也是一顿操作,后面还是换回了phpstorm,主要是新手开发,还是这个方便,等熟练了,就可以随意换了。

9个月前

@ibucoin 失误失误.马上改正,我现在就是两个一起用:stuck_out_tongue: ,那个方便就用那个干

9个月前

玩了几天的 vs code,折腾各种配置,自动 ESlint fix,自动 php cs fixer, 用了下最后还是放弃了,在 PhpStorm 上用惯了 ide_helper,没了这玩意儿敲代码都没那么爽了。

9个月前

vscode 大法好,自己选择扩展,又快又好用。ps我电脑压根带不起

4个月前
萧宇宸

请问一下模板文件.blade.php文件如何可以自动格式化呢?

1周前

  • 请注意单词拼写,以及中英文排版,参考此页
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
  • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
  • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
  • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
  请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!