├── .gitignore ├── package.json ├── README.md └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "stylelint-config-75team", 3 | "version": "1.0.1", 4 | "description": "stylelint config for 75team", 5 | "main": "index.js", 6 | "scripts": {}, 7 | "repository": { 8 | "type": "git", 9 | "url": "git+https://github.com/75team/stylelint-config-75team.git" 10 | }, 11 | "author": { 12 | "name": "betsey liu", 13 | "email": "betseyliu@icloud.com" 14 | }, 15 | "license": "ISC", 16 | "bugs": { 17 | "url": "https://github.com/75team/stylelint-config-75team/issues" 18 | }, 19 | "homepage": "https://github.com/75team/stylelint-config-75team#readme", 20 | "dependencies": { 21 | "postcss": "^6.0.13", 22 | "stylelint": "^8.2.0", 23 | "stylelint-config-standard": "^17.0.0", 24 | "stylelint-order": "^0.7.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # stylelint-config-75team 2 | > The recommended stylelint config of 75team 3 | 4 | [![npm](https://img.shields.io/npm/v/stylelint-config-75team.svg?style=flat-square)](https://www.npmjs.com/package/stylelint-config-75team) [![dependency status](https://david-dm.org/75team/stylelint-config-75team.svg)](https://david-dm.org/75team/stylelint-config-75team) [![License](https://img.shields.io/npm/l/stylelint-config-75team.svg)](LICENSE) 5 | 6 | 7 | 8 | Extends `stylelint-config-standard`, and uses `stylelint-order` to help sorting css properties according to our customized order. 9 | Use it as is or as a foundation for your own config. 10 | 11 | To see the rules that this config uses, please read the detail of our [config rules](!https://github.com/75team/stylelint-config-75team/blob/master/index.js). 12 | 13 | ## Installation 14 | 15 | ``` bash 16 | npm install stylelint-config-75team --save-dev 17 | ``` 18 | 19 | ## Usage 20 | 21 | Once you installed `stylelint-config-75team` locally within you project, just set you stylelint config to : 22 | 23 | ``` json 24 | { 25 | "extends": "stylelint-config-75team" 26 | } 27 | ``` 28 | Since we have extended `'stylelint-config-standard'`, you don't need to install the standard extends again. 29 | 30 | ## How the customize your own rules 31 | 32 | Simply add a "rules" key to your config, then add your overrides and additions there. 33 | 34 | For example, if you want all the string quotes to be single in your project, you can change the `string-quotes` rule to `'single'`. 35 | 36 | ``` json 37 | { 38 | "extends": "stylelint-config-75team", 39 | "rules": { 40 | "string-quotes": "single" 41 | } 42 | } 43 | ``` 44 | 45 | If you need furthor information about customizing rules, you can read [configuration guide](https://stylelint.io/user-guide/configuration/) and [rules of stylelint](https://stylelint.io/user-guide/configuration/) 46 | 47 | ## Use in IDE 48 | 49 | If you want to use stylelint in your project, we suggest you use the corresponding plugin in your IDE to get better coding experience. 50 | 51 | ### VSCode 52 | If you use VSCode, you need to install the following plugins: 53 | 54 | 1. **[stylelint](https://github.com/shinnn/vscode-stylelint)**: A Visual Studio Code extension to lint CSS/SCSS/Less with stylelint 55 | 56 | 2. **[stylefmt](https://github.com/morishitter/stylefmt)**: is a tool that automatically formats your stylesheets. 57 | 58 | ### Sublime 59 | 60 | If you use Sublime, you need to install [SublimeLinter-contrib-stylelint](https://github.com/kungfusheep/SublimeLinter-contrib-stylelint). 61 | 62 | In order for stylelint to be executed by SublimeLinter,you must ensure that nodejs is available to SublimeLinter.Before going any further, please read and follow the steps in “[Finding a linter executable](http://sublimelinter.readthedocs.io/en/latest/troubleshooting.html#finding-a-linter-executable)” through “Validating your PATH” in the documentation. 63 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | // 基于stylelint-config-standard 适合团队使用的stylelint规则，这里禁止在css中使用浏览器前缀，因为autoprefix会帮忙添加 2 | module.exports = { 3 | extends: 'stylelint-config-standard', 4 | plugins: ['stylelint-order'], 5 | rules: { 6 | 'custom-property-empty-line-before': 'never', // 禁止自定义属性前面存在空行 7 | // 颜色相关 8 | 'color-hex-length': null, // 关闭：强制十六进制颜色值的简写形式 9 | // 函数相关 10 | 'function-url-quotes': 'always', // 要求url使用引号 11 | // 字符串相关 12 | 'string-quotes': 'double', // fixable: 字符串使用双引号 13 | // 值相关 14 | 'value-no-vendor-prefix': true, // 禁止给值添加浏览器引擎前缀 15 | 'value-keyword-case': 'lower', // 值的关键词小写 16 | 'number-max-precision': 2, // 限制小数位数2位 17 | 'time-min-milliseconds': 100, // 限制时间不得小于100ms 18 | // property 19 | 'property-no-vendor-prefix': true, // 禁止属性使用浏览器引擎前缀 20 | // 声明 21 | 'declaration-block-semicolon-newline-after': 'always-multi-line', // 多行的时候要求声明块中的分号有另起一行 22 | 'declaration-block-semicolon-space-after': 'always-single-line', // 声明块中单行的时候要求分号后面有空格 23 | 'declaration-block-semicolon-space-before': 'never', // 声明块中分号前不能存在空格 24 | 'declaration-block-trailing-semicolon': 'always', // 声明块中最后一位必须有拖尾分号 25 | // 媒体相关 26 | 'media-feature-name-no-vendor-prefix': true, // 禁止给media添加浏览器引擎前缀 27 | // at-rule相关 28 | 'at-rule-no-vendor-prefix': true, // 禁止给@添加浏览器引擎前缀 29 | // 在声明块中属性的顺序 30 | 'order/properties-order': [ 31 | [ 32 | {properties: ['position', 'z-index', 'top', 'right', 'bottom', 'left']}, 33 | {properties: ['display', 'visibility', 'float', 'clear', 'overflow', 'overflow-x', 'overflow-y', 'clip', 'zoom', 'flex-direction', 'flex-order', 'flex-pack', 'flex-align']}, 34 | {properties: ['box-sizing', 'width', 'min-width', 'max-width', 'height', 'min-height', 'max-height', 'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', 'padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left']}, 35 | {properties: ['table-layout', 'empty-cells', 'caption-side', 'border-spacing', 'border-collapse', 'list-style', 'list-style-position', 'list-style-type', 'list-style-image']}, 36 | {properties: ['content', 'quotes', 'counter-reset', 'counter-increment', 'resize', 'cursor', 'nav-index', 'nav-up', 'nav-right', 'nav-down', 'nav-left', 'transition', 'transition-delay', 'transition-timing-function', 'transition-duration', 'transition-property', 'transform', 'transform-origin', 'animation', 'animation-name', 'animation-duration', 'animation-play-state', 'animation-timing-function', 'animation-delay', 'animation-iteration-count', 'animation-iteration-count', 'animation-direction', 'text-align', 'text-align-last', 'vertical-align', 'white-space', 'text-decoration', 'text-emphasis', 'text-emphasis-color', 'text-emphasis-style', 'text-emphasis-position', 'text-indent', 'text-justify', 'text-transform', 'letter-spacing', 'word-spacing', 'text-outline', 'text-transform', 'text-wrap', 'text-overflow', 'text-overflow-ellipsis', 'text-overflow-mode', 'word-wrap', 'word-break', 'tab-size', 'hyphens', 'pointer-events']}, 37 | {properties: ['opacity', 'color', 'border', 'border-collapse', 'border-width', 'border-style', 'border-color', 'border-top', 'border-top-width', 'border-top-style', 'border-top-color', 'border-right', 'border-right-width', 'border-right-style', 'border-right-color', 'border-bottom', 'border-bottom-width', 'border-bottom-style', 'border-bottom-color', 'border-left', 'border-left-width', 'border-left-style', 'border-left-color', 'border-radius', 'border-top-left-radius', 'border-top-right-radius', 'border-bottom-right-radius', 'border-bottom-left-radius', 'border-image', 'border-image-source', 'border-image-slice', 'border-image-width', 'border-image-outset', 'border-image-repeat', 'outline', 'outline-width', 'outline-style', 'outline-color', 'outline-offset', 'background', 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position', 'background-position-x', 'background-position-y', 'background-clip', 'background-origin', 'background-size', 'box-decoration-break', 'box-shadow', 'text-shadow']}, 38 | {properties: ['font', 'font-family', 'font-size', 'font-weight', 'font-style', 'font-variant', 'font-size-adjust', 'font-stretch', 'font-effect', 'font-emphasize', 'font-emphasize-position', 'font-emphasize-style', 'font-smooth', 'line-height']}, 39 | ], 40 | {unspecified: 'bottomAlphabetical'}, 41 | ], 42 | // 选择器相关 43 | 'selector-no-vendor-prefix': true, // 禁止给选择器添加浏览器引擎前缀 44 | }, 45 | } 46 | --------------------------------------------------------------------------------