vsCode 前端插件推荐-和插件配置

新的插件目录

1, Auto close tag
2, Auto rename tag
3, beautify
4, chinese language pack for visual studio code
5, ESLint
6, GitLens -git supercharged
7, HTML CSS Support
7，HTML Snippets
8, JavaScript(ES6) code snippets

path Intellisense  路径补全
Path Autocomplete  路径补全
css peek 快速定位/查看id/class的定义
intellisense for css class  class类名提示
Bracket pair colorizer  高亮括号，改括号颜色方便找匹配括号
Highlight matching tag

vue peek 
vue vscode snippets

10，Sass
10, language-stylus
11, Manta's Stylus Supremacy
12, open in browser
12，Prettier - Code formatter

13，JS JSX Snippets
13, React Redux ES6 Snippets15, Reactjs code snippets
16, Typescript React code snippets
17, vscode-open-project

18, Vetur20, Vue 2 Snippets
21, vue-helper
22，TSLint

23，live server  本地服务器
24，local history  找回历史代码
25，visual studio intellicode  提供智能代码建议
26，别名路径跳转

HTML Snippets、JavaScript (ES6) code snippets、jsx、React code snippets、TSLint、Document This、Prettier Code formatter;

 

 

Prettier Code formatter 在vcode配置

"editor.tabSize": 4,

"editor.defaultFormatter": "esbenp.prettier-vscode",

"editor.formatOnSave": true

在项目里都加个.vscode/settings.json 的文件
或者在项目最外层新建.vscode文件夹--新建 settings.json文件 放入

{

  "editor.tabSize": 4,

  "editor.defaultFormatter": "esbenp.prettier-vscode",

  "editor.formatOnSave": true

}

---这样不好卡

 解决vscode没有代码提示

https://blog.csdn.net/qq_37162688/article/details/90517963

  "editor.tabSize": 2,
  "editor.fontSize": 16,
  "editor.tabCompletion": "on",
  "editor.mouseWheelZoom": true, // 设置鼠标滚轮放大缩小代码



  // "editor.defaultFormatter": "esbenp.prettier-vscode",  // 格式化
  // "editor.formatOnSave": false, // 保存自动格式化



  // 使用emmet
  "emmet.triggerExpansionOnTab": true, // 开启emmet
  "emmet.showSuggestionsAsSnippets": true, // 显式弹出语法提示
  "emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly",
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "vue-html": "html",
    "plaintext": "jade"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

https://zhuanlan.zhihu.com/p/456547987

https://www.jianshu.com/p/a3b13dda486a

 

 

插件安装完成之后，还要对一些插件进行配置，例如：

vetur默认配置，

配置的过程：

打开 文件 > 首选项 > 用户设置(U) > 点击右上角---打开设置(json)

  // 执行文字相关的导航或操作时将用作文字分隔符的字符  去掉 - 功能：双击css样式选中整个连字符
  "editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?",
  //vetur的配置
  "emmet.syntaxProfiles": {
    "javascript": "jsx",
    "vue-html": "html",
    "vue": "html"
  },
  // 使用插件格式化 html
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  
  // 打开文件自动检测缩进
  "editor.detectIndentation": false,
  // tab缩进2个字符
  "editor.tabSize": 2,

 

参考自网站：https://segmentfault.com/a/1190000011779959

参考内容：https://www.cnblogs.com/zhaoshujie/p/9834654.html

　　　　　https://www.cnblogs.com/liuxianan/p/vscode-plugin-overview.html

　　　　　https://blog.csdn.net/a578024797/article/details/80935799