Visual Studio Code 插件推荐

绘一束光
190 阅读2分钟

编辑器下载地址（vs code）

Download Visual Studio Code - Mac, Linux, Windows

前端插件

  1. Auto Close Tag
    自动补全结束标签
    image.png
  2. Auto Rename Tag
    自动重命名标签
    image.png
  3. Css Initial Value
    提示CSS属性的初始值
    image.png
  4. Css Peek
    跳转到定义样式
    image.png
  5. Easy LESS
    编译LESS文件生成CSS
    image.png
  6. Sass
    编译Sass文件生成CSS
    image.png
  7. JavaScript (ES6) code snippets
    提示ES6语法
    image.png
  8. Vetur
    VUE2 提示语法以及语法高亮
    image.png
  9. Vue Language Features (Volar)
    VUE3 提示语法以及语法高亮
    image.png
  10. any-rule 正则大全
    image.png
  11. Chinese (Simplified)(简体中文) Language Pack for Visual Studio Code
    中文语言包
    image.png
  12. Better Comments
    注释代码高亮
    image.png
  13. Image preview
    引入图片，显示图片缩略图
    image.png
  14. Path Intellisense
    路径提示
    image.png
  15. vscode-icons
    资源管理器，文件类型图标区分
    image.png
  16. ESLint
    JS代码检查工具
    image.png
  17. Prettier - Code formatter
    JS代码格式化工具
    image.png
  18. A-super-translate
    划词翻译工具
    image.png
  19. Time Master
    工作时长记录
    image.png

vs code 配置setting.json

{
    "workbench.editor.enablePreview": false, //打开文件不覆盖
    "search.followSymlinks": false, //关闭rg.exe进程
    // "editor.minimap.enabled": false, //关闭快速预览
    "editor.lineNumbers": "on", //开启行数提示
    "editor.detectIndentation": false,
    "editor.quickSuggestions": {
        //开启自动显示建议
        "other": true,
        "comments": true,
        "strings": true
    }, //制表符符号eslint
    "javascript.format.insertSpaceBeforeFunctionParenthesis": false, // 方法括号之间插入空格
    "editor.formatOnSave": true, // 编辑器保存时自动格式化
    //保存自动修复
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "editor.tabSize": 4,
    "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
    "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
    "prettier.semi": true, //去掉代码结尾的分号
    "prettier.singleQuote": true, //单引号
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned" //属性强制折行对齐
        }
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],
    //让.js文件中的js按编辑器自带的ts格式进行格式化
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "[markdown]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    // 默认使用 vetur 格式化 .vue
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    "vetur.format.options.tabSize": 4,
    "vetur.format.scriptInitialIndent": true,
    "vetur.format.styleInitialIndent": true,
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "prettier.useEditorConfig": false,
    "json.maxItemsComputed": 10000,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "editor.suggest.snippetsPreventQuickSuggestions": true,
    "editor.fontLigatures": null,
    "[json]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    }
}

根目录下新建.editorConfig文件，配置

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 4
# windows
end_of_line = lf    
# mac
# end_of_line = cr  
insert_final_newline = true
trim_trailing_whitespace = true

重新启动

avatar
文章
阅读
粉丝