VSCode 配置并使用less

在VsCode中使用Less方法:

  1. 安装node.js (这是基本操作了。LESS需要有node.js支持,安装node.js略过)
  2. 安装less npm install less -g
  3. 在VSCode中。搜索插件 Easy LESS。安装,安装完后最好重启一次VSCode
  4. 普通的使用需求都可以满足了。在需要生成css文件的地方,新建一个.less文件。如图:
    这里写图片描述
  5. 在里面写你需要的样式,保存后,会自动在同级目录下,生成同样名称的css文件
  6. 至此,普通版的Less配置就完成了

进阶版:在截图中,我通常用于小程序开发,如果只是生成.css文件不能满足日常的需求,所以可以通过修改配置文件,来实现我们想要的效果

先生成一个.vscode。用来存放配置文件的。至于生成的方法很多,我是随便按了下F5。启动调试,虽然启动调试失败了,可是会自动生成这个文件

.vscode文件夹中,添加一个配置文件名称:settings.json
内容如下:

{
    "less.compile": {
        "compress": true, // 是否删除多余空白字符
        "sourceMap": false, // 是否创建文件目录树,true的话会自动生成一个 .css.map 文件
        "out": true, // 是否编译输出文件
        "outExt": ".wxss", // 输出文件的后缀,默认为.css
    }
}

这里我只是实现了一些简单的配置,详细的配置可以看vscode插件的介绍来配置。
至此,小程序调试也可以使用less了

  • 7
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
1. 安装插件 打开 VS Code,按下快捷键 `Ctrl + Shift + X` 或者点击侧边栏中的插件按钮,搜索 uniapp 并安装。 2. 配置自动补全 打开 VS Code 的设置,搜索 `emmet`,找到 `Emmet: Include Languages`,点击 `Edit in settings.json`,在打开的文件中添加以下配置: ``` "emmet.includeLanguages": { "vue-html": "html", "vue": "html", "wxml": "html", "uniapp": "html" } ``` 3. 配置 eslint 在 VS Code 中安装 eslint 插件,并在项目根目录下创建 `.eslintrc.js` 配置文件,可以使用以下配置: ``` module.exports = { root: true, env: { node: true, }, extends: [ 'plugin:vue/essential', 'eslint:recommended' ], parserOptions: { parser: 'babel-eslint', ecmaVersion: 2020, }, rules: { 'no-console': 'off', 'no-debugger': 'off', 'no-unused-vars': 'off', 'vue/no-unused-vars': 'off', 'vue/no-side-effects-in-computed-properties': 'off', 'vue/no-unused-components': 'off', 'vue/no-parsing-error': 'off', }, } ``` 4. 配置 prettier 在 VS Code 中安装 prettier 插件,并在项目根目录下创建 `.prettierrc` 文件,可以使用以下配置: ``` { "printWidth": 120, "tabWidth": 2, "useTabs": false, "semi": false, "singleQuote": true, "trailingComma": "es5", "bracketSpacing": true, "jsxBracketSameLine": false, "arrowParens": "avoid" } ``` 5. 配置样式 在 VS Code 中安装 Material Icon Theme 插件,并在设置中搜索 `Icons: Associations`,在打开的文件中添加以下配置: ``` { "fileExtensions": { "vue": "vue", "wxml": "html", "wxss": "css", "scss": "css", "sass": "css", "less": "css", "stylus": "css", "js": "javascript", "ts": "typescript", "jsx": "react", "tsx": "react", "json": "json", "md": "markdown", "html": "html", "uniapp": "vue", "wxss": "css", "wxs": "javascript" }, "fileNames": { ".eslintrc.js": "eslint", "tsconfig.json": "typescript" } } ``` 6. 配置快捷键 在 VS Code 中打开设置,搜索 `Keyboard Shortcuts`,找到 `Open Keyboard Shortcuts(JSON)`,在打开的文件中添加以下配置: ``` [ { "key": "ctrl+shift+l", "command": "editor.action.transformToLowercase", "when": "editorTextFocus" }, { "key": "ctrl+shift+u", "command": "editor.action.transformToUppercase", "when": "editorTextFocus" }, { "key": "ctrl+shift+i", "command": "editor.action.formatDocument", "when": "editorTextFocus" }, { "key": "ctrl+shift+s", "command": "editor.action.organizeImports", "when": "editorTextFocus && !editorReadonly" }, { "key": "ctrl+shift+c", "command": "workbench.action.terminal.toggleTerminal" } ] ``` 以上就是配置 uniapp 开发环境的方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值