vscode常用插件以及配置

vscode常用插件以及配置

1. auto close tag 自动闭合标签

2. Chinese (Simplified) Language vvscode中文插件

3. JavaScript (ES6) code snippets es6代码片段自动补全

4. open in browser

5. Path Intellisense 路径补全

6. Prettier - Code formatter 代码格式化工具

7. TSLint

8. Vetur vue的代码格式化超亮， Vue 2 Snippets， Vue VSCode Snippets

9. eslint

10. HTML Snippets html代码提示自动填充

11. Material Icon Theme 图标主题 可以显示项目的图标

12. Material Theme 背景颜色 ctrl+shift+p,设置背景主题颜色或是文件颜色，自己更改喜欢的颜色

13. 常见配置

    1. 窗口缩放级别 和 字体大小

    2. 字体配置

       1. 英文是Consolas，中文字体是微软雅黑，monospace是 等宽字符
          • “editor.fontFamily”: “Consolas, ‘Microsoft YaHei’, monospace”,

    3. 主题

    4. 配置文件关联

       对于不常用的文件我们采用什么对应的语言处理高亮提升等功能
       "files.associations": {
         "*.wxss": "css",
         "*.wxml": "html"
       },
       

    5. 通过 prettier 格式化代码，然后将结果传递给 eslint --fix。 这样，你可以获得 prettier 优于格式化功能的优势，但也可以从 eslint的配置功能获益。

    6. prettier

       官网https://prettier.io/docs/en/options.html

       printWidth 默认为80行，每行文字个数超出此限制将会*换行

       semi默认为true有分号

       先下载插件，然后设置配置文件，开启保存时格式化代码，然后将默认的格式化工具采用prettier-vscode
       官网https://prettier.io/docs/en/options.html
       // 在编辑保存的时候格式化
       "[javascript]": {
         "editor.formatOnSave": true,
         "editor.defaultFormatter": "esbenp.prettier-vscode"
       },
       //  去掉代码结尾的分号 
         "prettier.semi": false,
         //  使用单引号替代双引号 
         "prettier.singleQuote": true,
       
       可配置规则较少
       

    7. vuter配置

       格式化vue里面的相关项目 js，html， css等
       官网
       https://vuejs.github.io/vetur/formatting.html#formatters
       vetur.format.defaultFormatter. xxx  就是vuter这个插件去格式化html,css,postcss,scss,less,stylus,js,ts使用的格式化工具
       一般有这几种 prettier, prettier-eslint, prettyhtml, vscode-typescript
       

    process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTQ0MTU2MQ==,size_16,color_FFFFFF,t_70)
    下面标签格式化vue文件里面的js 使用prettier 插件
    “vetur.format.defaultFormatter.js”: “prettier”,

    //下面表示格式化是自定义的一些配置项
    “vetur.format.defaultFormatterOptions”: {
    “prettier”: {
    // 不要分号
    “semi”: false,
    // 默认为单引号
    “singleQuote”: true
    }
    }

    
    8. eslint规则配置
    
    

    https://eslint.bootcss.com/docs/rules/no-console/
    https://cn.eslint.org/docs/rules/
    // 常见规则配置
    https://blog.csdn.net/chuangjikuang3698/article/details/101058423

    .eslintrc.js

    rules 规则 0 1 2
    "off"或者0 //关闭规则
    "warn"或者1 //在打开的规则作为警告（不影响退出代码）
    "error"或者2 //把规则作为一个错误（退出代码触发时为1）

    最简单的关闭方法
    'rules': {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    'space-before-function-paren': 0
    

}

  除了书写配置文件，还可以在js文件里面添加注释
  /* xxx */
  ```