Skip to content

Commit 673dd75

Browse files
yunchae-kimyunchae-kim
committed
style: add/modify new style guides
[#62] Refer to GitHub issue... This update makes the following changes to the style guide implementations package.json - added babel plugin to fix dependency issues. - added eslint-import-sort and simple-import-sort to sort React imports. - added postcss and postcss-sorting to sort css attributes. - added prettier-jinja-template to read jinja HTML files. - added prettier-organize-attributes to sort HTML attributes. - added stylelint-config-recess-order to lint css attribute orders according to Recess rule. .eslinrc - modified general settings such as root, and env for more accurate implementation. - added simple-import-sort and sort-exports to sort react import and exports. - modified react indent setting to 2 spaces. - modified several eslint rules to "warning" to avoid causing bugs in previously written codes. These warnings are to be fixed in the future if needed. - added import sorting rules based on grouping and then alphabetically sorting. - added exception rules for underscore-dangle to avoid conflicts with Rewire package. prettierrc - added plugin organize-attributes to sort HTML attributes on common convention. - added plugin jinja-template to allow prettier to modify Jinja files properly. - added exception rules for html files and yml files. stylelintrc - added file to modify rules for Stylelint. - added rule selector-class-pattern to avoid causing bugs in previously written codes. These warnings are to be fixed in the future if needed. - added rule font-family-name-quotes to ignore unnecessary font import rules. .vscode/extensions.json - added batisteo.vscode-django to allow formatting Jinja files by changing Jinja HTML to Django HTML. - added monosans.djlint to lint Jinja files. - added samuelcolvin.jinjahtml to read HTML files as Jinja HTML files. - added jota0222.multi-formatter to use multi-formatter, especially to apply prettier first and then django formatter to Jinja HTML files. - added redhat.vscode-yaml to format YAML files. .vscode/settings.json - modified to format html files with Django formatter and css files with postcss. - added css ordering rule to match with Stylelint Recess ordering format. web/package.json - style: edited indents. setup.py - added isort package to sort package imports.
1 parent 8cf9f63 commit 673dd75

File tree

10 files changed

+20105
-19549
lines changed

10 files changed

+20105
-19549
lines changed

‎.eslintrc

Lines changed: 69 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
11
{
2+
"root": true,
3+
"env": {
4+
"browser": true,
5+
"es6": true,
6+
"node": true,
7+
"jest": true
8+
},
29
"extends": [
310
"airbnb",
411
"airbnb/hooks",
@@ -7,26 +14,28 @@
714
"plugin:react-hooks/recommended",
815
"plugin:jsx-a11y/recommended",
916
"plugin:import/recommended"
10-
// "plugin:node/recommended"
1117
],
12-
"plugins": ["prettier", "react", "import"],
18+
"plugins": ["prettier", "react", "import", "simple-import-sort", "sort-exports"],
1319
"parserOptions": {
1420
"ecmaFeatures": {
1521
"jsx": true
16-
}
22+
},
23+
"ecmaVersion": "latest",
24+
"sourceType": "module"
1725
},
1826
"rules": {
1927
"prettier/prettier": ["error"],
2028

2129
"react-hooks/exhaustive-deps": "warn",
2230
"react-hooks/rules-of-hooks": "error",
2331
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
24-
"react/jsx-indent-props": [2, 4],
25-
"react/jsx-indent": [2, 4],
32+
"react/jsx-indent-props": [2, 2],
33+
"react/jsx-indent": [2, 2],
2634
"react/jsx-one-expression-per-line": [0],
2735
"react/prefer-stateless-function": [1],
2836
"react/static-property-placement": [1, "property assignment"],
2937
"react/no-multi-comp": ["error", { "ignoreStateless": true }],
38+
"react/prop-types": "warn",
3039

3140
"semi": 2,
3241
"comma-dangle": "error",
@@ -38,29 +47,67 @@
3847
"prefer-template": "warn",
3948
"template-curly-spacing": ["error", "never"],
4049
"jsx-quotes": ["warn", "prefer-double"],
41-
"camelcase": ["error", { "properties": "always" }],
50+
"camelcase": ["warn", { "properties": "always" }],
4251
"no-unused-vars": ["warn"],
4352

4453
"import/prefer-default-export": ["warn", { "target": "any" }],
4554
"import/no-duplicates": ["error", { "considerQueryString": true }],
46-
"import/order": [
47-
"error",
48-
{
49-
"groups": ["builtin", "external", "internal"],
50-
"pathGroups": [
55+
"simple-import-sort/imports": "error",
56+
"simple-import-sort/exports": "error",
57+
"import/first": "error",
58+
"import/newline-after-import": "error",
59+
60+
"sort-exports/sort-exports": ["error", { "sortDir": "asc" }]
61+
},
62+
"overrides": [
63+
// Exceptions for ESLint related files
64+
{
65+
"env": {
66+
"node": true
67+
},
68+
"files": [".eslintrc.{js,cjs}"],
69+
"parserOptions": {
70+
"sourceType": "script"
71+
}
72+
},
73+
// Override "simple-import-sort" config
74+
{
75+
"files": ["*.js", "*.jsx", "*.ts", "*.tsx"],
76+
"rules": {
77+
"simple-import-sort/imports": [
78+
"error",
5179
{
52-
"pattern": "react",
53-
"group": "external",
54-
"position": "before"
80+
"groups": [
81+
// Packages `react` related packages come first.
82+
["^react", "^@?\\w"],
83+
// Internal packages.
84+
["^(@|components)(/.*|$)"],
85+
// Side effect imports.
86+
["^\\u0000"],
87+
// Parent imports. Put `..` last.
88+
["^\\.\\.(?!/?$)", "^\\.\\./?$"],
89+
// Other relative imports. Put same-folder imports and `.` last.
90+
["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
91+
// Style imports.
92+
["^.+\\.?(css)$"]
93+
]
5594
}
5695
],
57-
"pathGroupsExcludedImportTypes": ["react"],
58-
"newlines-between": "always",
59-
"alphabetize": {
60-
"order": "asc",
61-
"caseInsensitive": true
62-
}
96+
"simple-import-sort/exports": "error"
6397
}
64-
]
65-
}
98+
},
99+
// Exception rules for specific packages
100+
{
101+
"files": ["*.js", "*.jsx", "*.ts", "*.tsx"],
102+
"rules": {
103+
"no-underscore-dangle": [
104+
"error",
105+
{
106+
// Rewire methods
107+
"allow": ["__get__", "__set__", "__reset__"]
108+
}
109+
]
110+
}
111+
}
112+
]
66113
}

‎.prettierrc

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,24 @@
44
"singleQuote": true,
55
"tabWidth": 2,
66
"trailingComma": "all",
7-
"jsxSingleQuote": false
7+
"jsxSingleQuote": false,
8+
9+
"plugins": ["prettier-plugin-organize-attributes", "prettier-plugin-jinja-template"],
10+
11+
"attributeGroups": ["^class$", "^(id|name)$", "$DEFAULT", "^aria-"],
12+
13+
"overrides": [
14+
{
15+
"files": ["*.html"],
16+
"options": {
17+
"parser": "jinja-template"
18+
}
19+
},
20+
{
21+
"files": ["*.yml"],
22+
"options": {
23+
"printWidth": 80
24+
}
25+
}
26+
]
827
}

‎.stylelintrc

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"extends": ["stylelint-config-standard", "stylelint-config-recess-order"],
3+
"rules": {
4+
"selector-class-pattern": "^([_a-zA-Z][a-zA-Z0-9]*)(-[a-zA-Z0-9]+)*$",
5+
"font-family-name-quotes": null
6+
}
7+
}

‎.vscode/extensions.json

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,27 @@
11
{
2-
// See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
3-
// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
2+
// See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
3+
// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
44

5-
// List of extensions which should be recommended for users of this workspace.
6-
"recommendations": [
7-
"ms-python.python",
8-
"ms-python.vscode-pylance",
9-
"ms-python.autopep8",
10-
"ms-python.flake8",
11-
"ms-python.isort",
12-
"dbaeumer.vscode-eslint",
13-
"esbenp.prettier-vscode",
14-
"njpwerner.autodocstring"
15-
],
16-
// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
17-
"unwantedRecommendations": []
5+
// List of extensions which should be recommended for users of this workspace.
6+
"recommendations": [
7+
"ms-python.python",
8+
"ms-python.vscode-pylance",
9+
"ms-python.autopep8",
10+
"ms-python.flake8",
11+
"ms-python.isort",
12+
13+
"njpwerner.autodocstring",
14+
15+
"dbaeumer.vscode-eslint",
16+
"esbenp.prettier-vscode",
17+
18+
"batisteo.vscode-django",
19+
"monosans.djlint",
20+
"samuelcolvin.jinjahtml",
21+
"jota0222.multi-formatter",
22+
23+
"redhat.vscode-yaml"
24+
],
25+
// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
26+
"unwantedRecommendations": []
1827
}

0 commit comments

Comments
 (0)