Code Inspector是一个开发提效的神器
点击页面上的 DOM 元素，它能自动打开 IDE 并定位到 DOM 对应源代码位置
文档
目录
- 1、安装
- 2、配置
- 2.1、webpack
- 2.2、vue
- 2.3、vite
- 3、使用
1、安装
npm install code-inspector-plugin -D2、配置
2.1、webpack
// webpack.config.js
const { CodeInspectorPlugin } = require('code-inspector-plugin');
module.exports = () => ({
plugins: [
CodeInspectorPlugin({
bundler: 'webpack',
}),
],
});2.2、vue
// vue.config.js
const WebpackCodeInspectorPlugin = require('webpack-code-inspector-plugin');
module.exports = {
// ...other code
chainWebpack: (config) => {
// add this configuration in the development environment
config
.plugin('webpack-code-inspector-plugin')
.use(new WebpackCodeInspectorPlugin());
},
};2.3、vite
// vite.config.js
import { defineConfig } from 'vite';
import { CodeInspectorPlugin } from 'code-inspector-plugin';
export default defineConfig({
plugins: [
CodeInspectorPlugin({
bundler: 'vite',
}),
],
});3、使用
代码审查快捷键
- Mac 系统默认组合键是
Option + Shift - Window 的默认组合键是
Alt + Shift