介绍一款自动给添加不同浏览器CSS3前缀的插件~Autoprefixer（附其他前端开发插件）...

清疚 2023-08-17 15:19 95阅读 0赞

## 正文 ##

自动给`CSS文件`添加不同浏览器的CSS3前缀：`Autoprefixer`

### 安装 ###

![1127869-20190404222925733-684525605.png][]

### 只需兼容主流浏览器 ###

正常情况使用：（**在书写完的CSS样式文件中，按`F1`，选择`Autoprefixer CSS`**）

![1127869-20190404222930839-490431908.gif][]

这时候会添加最新需要兼容的css头（PS：现在基本上只考虑`Safari`和`Chrome`了）

### 兼容其他浏览器 ###

但是，这往往不是我们需要的，有时候还需要兼容`Firefox`、`Opera`和`IE`，那么可以自定义VSCode的配置项：

![1127869-20190404223600562-281691411.png][]

![1127869-20190404223607034-487728958.png][]

// autoprefixer配置
        "autoprefixer.browsers": [
            "ie >= 6", 
            "firefox >= 8",
            "chrome >= 24",
            "Opera>=10"
        ]

效果演示：  
![1127869-20190404223637069-612701324.gif][]

## 其他插件 ##

最后贴一下我的前端插件：

1.  JS、CSS压缩：**`Minify`**
2.  在谷歌浏览器中调试：**`Debugger for Chrome`**
3.  给不同区块的括号上不同的色；**`Bracket Pair Colorizer`**
4.  自动给`CSS文件`添加不同浏览器的CSS3前缀：**`Autoprefixer`**
5.  智能提示CSS与ID：**`HTML CSS Support`**
6.  查看语法兼容性：**`Can I Use`**
    
     *  PS：搜索html5就能找到
7.  实时监测JS输出：**`Quokka.js`**
    
     *  PS：只支持`js`和`ts`文件
8.  语法检测：**`ESLint`**、`jshint`、`HTMLHint`
9.  js文档注释：`Document This`（`Ctrl+Alt+D`）
10. CSS样式跳转：`CSS Peek`
11. Vue框架智能提示：`Vetur`
12. 缩写补全：`JavaScript (ES6) code snippets`
13. 格式化插件：`Beautify`
14. 文件版权声明：vscode-fileheader ctrl+alt+i

转载于:https://www.cnblogs.com/dotnetcrazy/p/10657394.html

[1127869-20190404222925733-684525605.png]: /images/20230810/a733d2f336a34c8da9eacb759b5b0bd4.png
[1127869-20190404222930839-490431908.gif]: /images/20230810/6353088f66f54ca18fbe9905ad1fcc92.png
[1127869-20190404223600562-281691411.png]: /images/20230810/dfa11f39c37440ae81479e35f4fef82c.png
[1127869-20190404223607034-487728958.png]: /images/20230810/8836948f26a04cc8bcdd9f10af462419.png
[1127869-20190404223637069-612701324.gif]: /images/20230810/b94327c2bbee4b1599e36616df0fabd2.png