stylelint | 易学教程

VSCode 使用 ESLint + Prettier 来统一 JS 代码

阅读更多关于 VSCode 使用 ESLint + Prettier 来统一 JS 代码

环境： VSCode 1.33.1 Node.js 8.9.1 一、ESLint 1、介绍 ESLint 是最流行的 JavaScript Linter 。 Linter 是检查代码风格/错误的小工具。其他类似的 Linter 工具还有：TSLint、stylelint。它包含三个功能：（1）check syntax （2）find problems 前两个可以统称为 Code-quality rules，例如 no-unused-vars 规则。（3）enforce code style 最后一个可以称为 Formatting rules ，例如 keyword-spacing 规则。下面介绍的 Prettier 就只有这一个 Formatting rules 功能。 2、安装 npm install -g eslint 建议全局安装。 3、使用 (1) 生成配置文件下面的命令，可以在项目的根目录创建 .eslintrc.js 配置文件。 eslint --init 按照交互提示，依次选择进行： (2) 校验文件 eslint yourfile.js # 命令行会返回出现 problems 的数量和相应行数。 eslint --fix yourfile.js # 直接修改文件 (3) 修改配置文件一个简单的 .eslintrc.js 文件： module

微信小程序工程化探索之webpack实战

阅读更多关于微信小程序工程化探索之webpack实战

前言微信小程序因为其便捷的使用方式，以极快的速度传播开来吸引了大量的使用者。市场需求急剧增加的情况下，每家互联网企业都想一尝甜头，因此掌握小程序开发这一技术无疑是一名前端开发者不可或缺的技能。但小程序开发当中总有一些不便一直让开发者诟病不已，主要表现在：初期缺乏方便的npm包管理机制（现阶段确实可以使用npm包，但是操作确实不便）不能使用预编译语言处理样式无法通过脚本命令切换不同的开发环境，需手动修改对应环境所需配置（常规项目至少具备开发与生产环境）无法将规范检查工具结合到项目工程中（诸如EsLint、StyleLint的使用）有了不少的问题之后，我开始思考如何将现代的工程化技术与小程序相结合。初期在社区中查阅资料时，许多前辈都基于gulp去做了不少实践，对于小程序这种多页应用来说gulp的流式工作方式似乎更加方便。在实际的实践过后，我不太满意应用gulp这一方案，所以我转向了对webpack的实践探索。我认为选择webpack作为工程化的支持，尽管它相对gulp更难实现，但在未来的发展中一定会有非凡的效果，实践我们先不考虑预编译、规范等等较为复杂的问题，我们的第一个目标是如何应用webpack将源代码文件夹下的文件输出到目标文件夹当中，接下来我们就一步步来创建这个工程项目： /* 创建项目 */ $ mkdir wxmp-base $ cd ./wxmp-base

how to validate / lint styled-jsx in NextJS?

阅读更多关于 how to validate / lint styled-jsx in NextJS?

问题 I am using nextJS for development, for stylelint to validate my .scss and .css files. I'm also using styled-jsx or css-in-js for component level styling (it's kind of requirement) and want to know if there's some library to validate styled-jsx below is the code sample of my css code. <style jsx>{` .HeadText { color: ${myColors['color-primary']}; } `} </style> I've tried using this library but it work's for only static styles like below : <style jsx>{` .HeadText { color: red; bad-property:

how to validate / lint styled-jsx in NextJS?

阅读更多关于 how to validate / lint styled-jsx in NextJS?

I want to automatically fix my CSS source files, but I get an endless loop

阅读更多关于 I want to automatically fix my CSS source files, but I get an endless loop

问题 I use gulp-stylefmt and it run every time I save any CSS file: function stylelint () { return gulp.src('src/**/*.css') .pipe($.stylefmt()) .pipe(gulp.dest('src/')); } Same time gulp.watch watches the path src/**/*.css and run stylelint task again. Console output: [16:32:24] Starting 'stylelint'... [16:32:25] Finished 'stylelint' after 554 ms [16:32:25] Starting 'stylelint'... [16:32:25] Finished 'stylelint' after 60 ms [16:32:25] Starting 'stylelint'... [16:32:25] Finished 'stylelint' after

Can I stop stylelint extension from validating JavaScript file?

阅读更多关于 Can I stop stylelint extension from validating JavaScript file?

问题 Good day, In above picture, stylelint prompt a CSS error in a JS file. Is there a way to stop stylelint from validating javascript file, I coundn't find such option in their official configuration guide. Thanks a lot. 回答1: The linter can be configured to ignore specific files using the ignoreFiles property of the stylelint configuration object. You can try ignoring JavaScript files with: { "ignoreFiles": ["**/*.js"], "rules": { .. } } I believe the stylelint Visual Studio Code extension will

Stylelint VScode doesn't work

阅读更多关于 Stylelint VScode doesn't work

问题 I want to use the css linter "stylelint" on my VScode text editor. I downloaded the plugin and install it, then I make the "css.validate": false. But i don't have any box that show me error on my CSS files. What can I do ? 回答1: If you're getting started with stylelint for the first time , there are two key steps to enable it in Visual Studio Code: turn off Visual Studio Code's built-in CSS linter and turn on the stylelint extension create a stylelint configuration object and turn on some

How to Edit Auto-Formatting Rules for CSS/SCSS/LESS using Prettier in VSCode?

阅读更多关于 How to Edit Auto-Formatting Rules for CSS/SCSS/LESS using Prettier in VSCode?

问题 Background: I'm using Prettier - Code formatter extension for VSCode to auto-format my code on save. Problem: I'm used to writing single-line blocks in my sass files (where there's only a single property) i.e. .some-class { background: #f00; } Problem is the Prettier extension formats it to multi-lines i.e. .some-class { background: #f00; } It seems prettier uses stylelint for css/scss files and I've found these settings can be over-written by enabling this in the settings: "prettier

VS Code style-lint ignore directories

阅读更多关于 VS Code style-lint ignore directories

问题 Is it possible to ignore my CSS path, beacuse I only use stylelint for SCSS validation? e.g. - I have the following structure: assets/ css/ scss/ How can I disable the css/ folder from being indexed, trough the settings.json file of VSCode? I found this in the docs , but I don't know how to implement it in VSCode. 回答1: If you're using the VS Code stylelint extension, you can specify ignore paths via the stylelint.configOverrides setting. Add the following to your VS Code settings.json file:

I want to automatically fix my CSS source files, but I get an endless loop

阅读更多关于 I want to automatically fix my CSS source files, but I get an endless loop

I use gulp-stylefmt and it run every time I save any CSS file: function stylelint () { return gulp.src('src/**/*.css') .pipe($.stylefmt()) .pipe(gulp.dest('src/')); } Same time gulp.watch watches the path src/**/*.css and run stylelint task again. Console output: [16:32:24] Starting 'stylelint'... [16:32:25] Finished 'stylelint' after 554 ms [16:32:25] Starting 'stylelint'... [16:32:25] Finished 'stylelint' after 60 ms [16:32:25] Starting 'stylelint'... [16:32:25] Finished 'stylelint' after 33 ms [16:32:25] Starting 'stylelint'... [16:32:25] Finished 'stylelint' after 36 ms [16:32:26] Starting